Bootstrap列居中

Question

我们说我有一个基本的HTML引导程序布局，如下所示：

<div class="container">
  <div class="row">
      <h2>Test Title</h2>

      <div class="col-md-6">
        <h5>Test1</h5>
        <h5>Test1</h5>
        <h5>Test1</h5>
      </div>

      <div class="col-md-6">
        <h5>Test1</h5>
        <h5>Test1</h5>
        <h5>Test1</h5>
      </div>
  </div>
</div>

使用这个CSS：

h2{
  text-align: center;
}

标题正确居中，但如何移动col-md-6以使标题直接位于两者的中间？

我正在打字的一个例子。

Example

感谢任何帮助。

Answer 1

只需在text-center项后添加col-md-6，或在每次更新时添加行本身，将这两个div放在一行中。另外，将标题标记留在行外。

＆＃13;

＆＃13;

h2{
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <h2>Test Title</h2>

  <div class="row text-center">
    <div class="col-md-6">
      <h5>Test1</h5>
      <h5>Test1</h5>
      <h5>Test1</h5>
    </div>

    <div class="col-md-6">
      <h5>Test1</h5>
      <h5>Test1</h5>
      <h5>Test1</h5>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有关排版相关事宜的详细信息，请参阅Bootstrap文档的this section。如果您愿意，也可以将其作为类添加到h2标签中以使标题文本居中。

Answer 2

您可以使用相同的CSS规则，并将text-center应用于.col-md-6 div，如下所示：

h2, 
.col-md-6 {
  text-align: center;
}

根据您使用的Bootstrap版本，您应该使用.center-block或.text-center，而不是覆盖Bootstrap的内置功能。<​​/ p>

Answer 3

只需将text-center添加到该行。

<div class="container">
  <div class="row text-center">
      <h2>Test Title</h2>

      <div class="col-md-6">
        <h5>Test1</h5>
        <h5>Test1</h5>
        <h5>Test1</h5>
      </div>

      <div class="col-md-6">
        <h5>Test1</h5>
        <h5>Test1</h5>
        <h5>Test1</h5>
      </div>
  </div>
</div>

这里的工作示例：http://www.bootply.com/JvTYpubUeh#

Answer 4

尝试边距样式属性 http://learnlayout.com/margin-auto.html

创建一个类（或使用引导类）

#main { width: 600px; margin: 0 auto; }