首頁 > web前端 > css教學 > 如何在 Twitter Bootstrap 中水平和垂直居中元素?

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

Patricia Arquette
發布: 2024-12-10 06:26:21
原創
1012 人瀏覽過

How to Center Elements Horizontally and Vertically in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板