Question

我试图让文字在整个黄色空间内垂直居中。我一直在努力实施＆＃34;对齐项目中心＆＃34;按照他们的文档中的建议，以及＆＃34; my-auto＆＃34;类。我不确定我做错了什么。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

CodePen Demo

Answer 1

（我认为你的意思是＆＃34;垂直居中＆＃34 ;;因为你的例子中只有一列，所以没有任何东西可以将它与对齐。）

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

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

Answer 2

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

.row {
   height: 100%;
 }

Answer 3

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

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

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

Answer 4

首先，使用bootstrap 4类，就像它们要使用的那样： class =“d-flex flex-column justify-content-center”，然后您不需要在行中添加高度。如果不必要，请不要制作单独的css规则，只重复现有的实用程序类。

/*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

如何将文本垂直居中于＆＃34; col-sm-12＆＃34;用Bootstrap 4？

4 个答案: