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>都浮动到左侧。我需要将其置于中心并自行设置填充。我该如何解决这个问题？

Answer 1

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

Answer 2

将class =“text-center”添加到div。

<div id="naglowek" class="text-center">
    <h1>Something</h1>
</div>

文本中心类来自bootstrap。

Answer 3

在 bootstrap 4

中

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

水平居中的孩子，使用bootstrap-4 class

justify-content-center

垂直居中，使用bootstrap-4 class

 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实用程序。

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

Answer 4

您可以将b类添加到h1。

text-center

如何在boot -rap中将col-md-12中的div居中

4 个答案: