如何在 Twitter Bootstrap 中水平和垂直居中元素？

在Twitter Bootstrap 中將元素居中的綜合指南

使用Twitter Bootstrap 時，需要在父容器內垂直或水平居中元素經常出現。這個多功能框架提供了多種方法來實現這種對齊。

水平居中

1. text-center 類別：應用文字中心class 到父容器以使其內容水平居中。對於文字和非文字元素來說，這是一種簡單有效的方法。
2. mx-auto 類別：如果您需要更大的靈活性並希望偏移居中，請使用 mx-auto班級。它會在元素的左側和右側添加自動邊距，並將其推到中心。

垂直居中

Bootstrap 不提供內建的垂直居中的實用程式。但是，有兩種常見的技術：

1. Pagination-Centered 類別： 要在具有分頁控制項的容器內垂直居中單一元素，請將pagination-centered 類別應用於分頁控制包裝器。
2. 自訂 CSS： 您也可以使用自訂 CSS 垂直居中元素。例如，在要居中的元素上設定 margin-top: auto 和 margin-bottom: auto 屬性。

注意：

文本-center 和以分頁為中心的類別在最新版本的 Bootstrap 中已被棄用。建議改用 mx-auto 和 d-flex 實用程式。

以上是如何在 Twitter Bootstrap 中水平和垂直居中元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！