html - 无法在 Bootstrap 行中居中放置某些文本

Question

我正在尝试将一些文本居中放置。我觉得这不应该这么困难，我很困惑为什么它不起作用。

图片(示例)

#title_img {
  background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
  height: 180px;
  width: 180px;
  margin: 0 auto;
}
#title_img_holder {
  padding-top: 5%;
  float: none;
  margin: 0 auto;
}
#title_holder {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="header_con">
  <div class="container">
    <div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div>
    <div class="row" id="title_holder">
      <h2 class="text-center">We fix screens.
        <small class="text-muted">Not for free though</small>
      </h2>
    </div>
  </div>
</div>

我使用的是最新版本的 boostrap 4

Answer 1

添加此 CSS:

#title_holder h2 {
    margin: 0 auto;
}

(您必须将 h2 在其父容器中居中)

http://codepen.io/anon/pen/QpqQYq