如何在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