如何实现数字与冒号的垂直对齐？附HTML/CSS示例

看起来你需要让大字号的数字和旁边的冒号（以及后续文字）实现整齐的垂直对齐，我帮你完善了代码，提供两种可行的方案：

方案1：使用传统垂直对齐属性 #

适合需要兼容旧浏览器的场景，基于CSS原生的vertical-align属性实现：

完整HTML代码 #

<ul>
  <li><span>30</span>: days</li>
  <li><span>24</span>: hours</li>
  <li><span>60</span>: minutes</li>
</ul>

完整CSS代码 #

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
  /* 统一li元素的垂直对齐基准 */
  vertical-align: middle;
}

ul li span {
  font-size: 32px;
  display: inline-block;
  /* 让数字与冒号/文字对齐到基线 */
  vertical-align: baseline;
  margin-right: 4px; /* 给数字和冒号之间添加舒适的间距 */
}

方案2：使用Flex布局（推荐） #

这是更现代的解决方案，代码简洁且对齐逻辑更直观，主流浏览器都支持：

完整CSS代码（HTML与方案1一致） #

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-flex;
  /* 让子元素对齐到基线，一键实现完美垂直对齐 */
  align-items: baseline;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
}

ul li span {
  font-size: 32px;
  margin-right: 4px;
}

原理说明 #

两种方案的核心都是让大字号数字和小字号的冒号/文字对齐到基线（baseline），这样视觉上会呈现出整齐的垂直对齐效果。Flex方案不需要额外处理复杂的vertical-align属性，通过align-items: baseline就能直接实现需求，是目前更推荐的做法。

内容的提问来源于stack exchange，提问作者Miguel Moura