不能在引导行中居中放置一些文本

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>

我使用的自举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>