如何在 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中文网其他相关文章！