如何在 Div 内垂直居中 Span

垂直对齐在 CSS 中可能会令人困惑，而在 div 内对齐 Span 则不然例外。

了解 CSS 对齐

在深入研究之前解决方案中，了解CSS中的垂直对齐至关重要：

• 自然对齐：内联元素（如span）在基线处自然对齐，即
• 行高： line-height 属性设置行框的高度，包含字符和任何前导空格。
• 固有高度：元素的固有高度是它在没有任何样式或填充的情况下占用的空间。

垂直对齐技术

要将跨度在 div 内垂直居中，请考虑这些技巧：

1。将行高与容器高度匹配：

设置跨度的行高以匹配 div 的高度。例如div高15px，则设置line-height: 15px；在跨度上。

2。绝对定位：

设置位置：绝对；关于 div 和位置：绝对；顶部：50%；在跨度上。然后将跨度的 margin-top 值调整为其固有高度的一半。

3.变换：translateY

使用变换：translateY(-50%);跨度上的属性。这会将跨度垂直移动其固有高度的一半。

4。 Flexbox

利用 Flexbox 使跨度垂直居中。设置显示：flex；对齐项目：居中；在 div 和边距上：auto；

代码示例

下面是使用行高方法的示例：

  as