Question

我在我的页面上使用了一个jumbotron作为一个部分。

我想要做的是将jumbotron的子元素在父元素中水平和垂直居中。

我尝试了多个我们在其他SO帖子上指出的课程，例如：span8 centering，jumbotron d-flex align-items-center，justify-content-center等。

这是我的代码：

<body>
  <div class="jumbotron">
    <div class="span8 centering">
      <h1>Text 1</h1>
      <p>Text 2</p>
      <br>
      <iframe src="https://www.youtube.com/embed/JC82Il2cjqA" width="560" height="315" frameborder="0" allowfullscreen></iframe>
      <br>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
  </div>
</body>

Answer 1

试试这个

.centering{
    text-align: center!important;
}

<body>
  <div class="jumbotron">
    <div class="span8 centering">
      <h1>Text 1</h1>
      <p>Text 2</p>
      <br>
      <iframe src="https://www.youtube.com/embed/JC82Il2cjqA" width="560" height="315" frameborder="0" allowfullscreen></iframe>
      <br>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
  </div>
</body>

Answer 2

您可以使用flexbox。将一些flex属性应用于.jumbotron类，并将.centering

中的项目居中对齐

.jumbotron {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.centering {
  text-align: center;
}

小提琴：https://jsfiddle.net/o6ngcws4/1/

元素不会在jumbotron元素内水平居中

2 个答案: