如何在 bootstrap 的 col-md-12 中居中 div

Question

我在 col-md-12 组件居中时遇到问题。例如，我有 12 列 <h1> 或 <h2> 里面。我想 <h1> 居中。

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

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="naglowek">
        <h1>Something</h1>
      </div>
    </div>
  </div>
</div>

我试图访问 css 类 text-center 或 block-center 到 div，但每次 <h1> 都浮动到左边。我需要自己居中并设置填充。我该如何解决这个问题？

原文由 mrkkr91 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<div class="col-md-12 text-center"> 适用于引导程序，无需添加任何样式，除非您已经为 h1 设置了一些样式。即使是这种情况，您也可以将 .text-center 用于 h1 似乎您在该父 div 中使用宽度。如果您需要内容为 100% 宽度，请不要这样做。根据背景，如果你需要 100% 的区域占据背景，你可以简单地在 div 中使用它，如果不需要，你最好将它与一些伪类一起使用 :before 或 :after

原文由 Lucian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 引导程序 4

我知道这不是这个问题的直接答案，但它可能会对某人有所帮助

要使孩子水平居中，请使用 bootstrap-4 类

justify-content-center

要使孩子垂直居中，请使用 bootstrap-4 类

 align-items-center

但请记住不要忘记将 d-flex 类与这些一起使用，它是一个 bootstrap-4 实用程序类，就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>
</div>

复制并粘贴此代码段以检查其工作原理

注意： 如果此代码不起作用，请确保添加 bootstrap-4 实用程序。

希望这会对某人有所帮助。

原文由 user9299363 发布，翻译遵循 CC BY-SA 3.0 许可协议