是否有一种简单的方法来垂直居中div并让它们显示内联？

Question

我的目标是用这些球体制作一个从左到右的时间线。每个球体将占据其各自的75个像素，然后下一个球体将在其右侧，等等。我能够将它们全部垂直居中，但是让它们显示内联后让我拉出我的头发。我确信我会忽略一些简单的事情。

我当前的代码导致了什么：

结束目标：

我的CSS：

.timeline{
float: left;
margin: auto;
top: 0;
bottom: 0;
position: absolute;
z-index: 10;
width: 75px;
height: 75px;
}
#divider{
background-color: #bababa;
height: 4px;
z-index: 0;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
}

片段的其余部分：

<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<div class="orb timeline"></div>
<span id="divider"></span>

Answer 1

这有帮助吗？

.parent { white-space: nowrap; }

.timeline{
  display: inline-block;
  position: relative;
  z-index: 10;
  width: 75px;
  height: 75px;
  background-color: tomato;
  border-radius: 50%;
}

#divider {
  background-color: #bababa;
  height: 4px;
  position: relative;
  top: 39.5px; /* = 75px/2 + 4px/2 */
}

<div class="parent">
  <div id="divider"></div>
  <div class="orb timeline"></div>
  <div class="orb timeline"></div>
  <div class="orb timeline"></div>
  <!-- and so on... -->
</div>

<强> ONLINE DEMO

UPDATED DEMO （子弹周围有边框）