如何用CSS将水平线与多行段落首行垂直居中对齐？

要让水平线与段落首行垂直居中对齐，而非相对于整个文本容器居中，你可以通过调整Flex布局的对齐逻辑并配合样式微调实现，具体修改如下：

修改后的CSS代码 #

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  /* 可选：统一文本行高，方便对齐计算 */
  line-height: 1.2;
}

.container {
  display: flex;
  column-gap: 20px;
  /* 让元素对齐文本第一行的基线 */
  align-items: baseline;
}

.line {
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
  /* 微调位置，让水平线垂直居中对齐首行文本中线 */
  transform: translateY(calc(50% - 0.15em));
}

p {
  margin: 0;
  margin-bottom: 20px;
}

原理说明 #

• 将.container的align-items设为baseline，让水平线与文本容器的第一行基线对齐；
• 通过transform: translateY(calc(50% - 0.15em))调整水平线位置，使其刚好对齐首行文本的垂直中线（0.15em可根据实际行高微调，确保对齐精准）；
• 保留.line的flex-shrink: 0，防止水平线被Flex布局压缩。

替代方案（使用margin计算偏移） #

如果不想用transform，也可以通过margin-top直接计算偏移量：

.line {
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
  align-self: flex-start;
  /* 行高的一半减去水平线高度的一半，实现居中 */
  margin-top: calc((1.2em - 2px) / 2);
}

这种方式需要提前确定文本行高（示例中为1.2em），数值可根据字体大小和行高灵活调整。

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