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

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>