如何在 "col-sm-12" 和 Bootstrap 4 中垂直居中我的文本？

Question

我试图让文本在整个黄色区域中垂直居中 space。正如他们的文档中所建议的那样，我一直在尝试将 "align-items-center" 以及 "my-auto" class 实现到行中。我不确定我做错了什么。

#heading-cont {
    background-color: #F7CE38;
    height: 10rem;
}

.white {
    color: white;
}

.title {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

.description {
    font-family: 'Pathway Gothic One', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid" id="heading-cont">
    <div class="row">
      <div class="col-sm-12 my-auto">
        <h1 class="title white text-center">Digital</h1>
        <h4 class="description white text-center">This is the description.</h4>
      </div>
    </div>
  </div>
</section>

CodePen Demo

Answer 1

（我假设你的意思是 "vertically center"；因为你的示例中只有一列，所以没有什么可以将它与 对齐。）

container-fluid 在 Bootstrap 中指定的最小高度为 10rem。要使文本垂直居中，您需要拉伸 row 以匹配它：

#heading-cont > .row {
    height: 100%;
}

Answer 2

您需要将行高设为 100%，以便有空间将文本居中。

.row {
   height: 100%;
 }

Answer 3

您可以将 class（在我的示例中为 .x）添加到 #heading-cont 并对其应用以下 CSS 以使其成为 flexbox 容器并垂直居中其内容：

.x {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

https://codepen.io/anon/pen/GMdazJ

Answer 4

首先，像使用它们一样使用 bootstrap 4 classes ： class="d-flex flex-column justify-content-center"，然后就不用再给行加上高度了。如果不需要，请不要制定单独的 css 规则来重复现有的实用程序 classes。

/*containers*/

.container-fluid {
  padding: 0;
}

#heading-cont {
  background-color: #F7CE38;
  height: 10rem;
}

#subheading {
  height: 8rem
}

#heading-cont > .row {
 /* height: 10rem;*/
}

#subheading > .row {
    /*height: 100%;*/
}

/*type + color*/

h1 {
  font-size: 3rem !important;
}

h3 {
  font-size: 2rem !important;
}

.white {
  color: white;
}

.margin-b {
  margin-bottom: 2rem;
}


.title {
  font-family: 'Montserrat', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 300;
}

.description {
  font-family: 'Pathway Gothic One', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

/*social-prof*/

.box {
  background-color: #E0E0E0;
  height: 20rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title white text-center">Digital</h1>
        <h3 class="description white text-center">This is the description.</h3>
      </div>
    </div>
  </div>
</section>

<section class="social-prof">
  <div class="container-fluid d-flex flex-column justify-content-center" id="subheading">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title text-center">Branding</h1>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="bu">
    <div class="row">
      <div class="col-sm-12">
        <div class="box">
          <div class="layer">
            <h3 class="description white text-center margin-b">Small Business Services</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/anon/pen/oGyrPg

如何在 "col-sm-12" 和 Bootstrap 4 中垂直居中我的文本？

How can I vertically center my text within a "col-sm-12" with Bootstrap 4?

html

css

twitter-bootstrap

flexbox

twitter-bootstrap-4