css - 有没有一种简单的方法可以使 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 (子弹周围有边框)