无法将某些文本置于 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

Answer 2

现在，.title_holder 上的 display: flex 覆盖了 <h2> 自动填充其父级的整个宽度的能力。一个简单的解决方法是设置 .title_holder h2 { width: 100%; }，然后文本内容将居中。

#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;
    }
    
    #title_holder h2 {
        width: 100%;
    }

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

无法将某些文本置于 Bootstrap 行的中心

Can't center some text in a Bootstrap row

html

css

twitter-bootstrap

twitter-bootstrap-4