如何在 CSS 中将 Span 垂直居中在 Div 中？

如何在 Div 内垂直居中 Span

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

了解 CSS 对齐

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

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

垂直对齐技术

要将跨度在 div 内垂直居中，请考虑以下技术：

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

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

2。绝对定位：

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

3.变换：translateY

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

4。 Flexbox

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

代码示例

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

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

以上是如何在 CSS 中将 Span 垂直居中在 Div 中？的详细内容。更多信息请关注PHP中文网其他相关文章！