如何在 HTML/CSS 中將 `` 元素垂直居中在 `` 容器中？

以為中心在 div 內垂直

在 HTML/CSS 中，一個常見的任務是將 span 元素在 div 容器內垂直居中。然而，使用標準技術實現這種對齊可能具有挑戰性。

為了解決這個問題，讓我們考慮提供的範例程式碼：

<code class="html"><div id="theMainDiv" style="...">
  <span id="tag1_outer" style="...">as</span>
</div></code>

渲染此程式碼時，span 元素與 div 的左下角對齊。要使其垂直居中，您可以選擇以下技術之一：

• 將子級的行高設定為容器的高度：此方法需要了解容器的高度。透過將 span 元素的 line-height 設定為相同的值，可以有效地將文字在 span 內垂直居中。
• 絕對定位子元素並使用 margin-top: 這種方法涉及在容器上設置絕對定位並將 span 元素絕對定位在其中。然後，將跨距的 top 屬性設為 50%，並套用等於跨距高度一半的負 margin-top。此技術可讓您將跨度垂直居中，無論容器的高度為何。

有關垂直對齊的全面說明，請參閱有關了解垂直對齊的連結文章。

以上是如何在 HTML/CSS 中將 `` 元素垂直居中在 `` 容器中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！