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

如何在Div 內垂直居中Span

垂直對齊在CSS 中可能會令人困惑，而在div 內對齊Span 則不然例外。

了解CSS 對齊

在深入研究解決方案之前，了解CSS 中的垂直對齊至關重要：

• 自然對齊： 內聯元素（如span）自然對齊在 基線，即最低字元的底部。
• 行高： 行-height 屬性設定行框的高度，該行框包含字元和任何前導空格。
• 固有高度：元素的固有高度是它在沒有任何字元的情況下佔用的空間樣式或填充。

垂直對齊技術

要將跨度在div 內垂直居中，請考慮以下技術：

1.將考慮以下技術：

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中文網其他相關文章！