如何在 Twitter Bootstrap 中居中內容？

如何使用Twitter Bootstrap 將內容居中

在Twitter Bootstrap 中，您可以透過根據您的特定要求而有所不同的方法來實現居中內容。

居中Text

要將文字居中對齊，您可以將 .text-center 類別應用於父容器。這個類別在 Bootstrap 2.3.0 中引入，可以輕鬆實現文本居中。

<div class="text-center">
  <h1>Bootstrap Starter Template</h1>
  <p>Example text.</p>
</div>

註解：

• 舊版中的文字對齊選項Bootstrap（2.3.0之前），您可以將text-align: center 新增到.row 或.span12

非文字內容的替代方法

要居中非文字元素（例如圖片或按鈕），您有以下選項：

• 邊距： 將邊距：0自動加入元素，在兩側建立相等的邊距。
• Float: 設定 float: none，然後將 margin: 0 auto 加入到父容器。
• Bootstrap實用類： 利用 .pull-left、.pull-right 和 .center-block類。
• 自訂樣式：在您自己的自訂樣式表中定義居中規則。

選擇最適合您的特定需求和 Bootstrap 版本的方法。

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