爲什麼這隻在我放大時居中？ （使用引導程序）

Question

如果將以下代碼放在全屏中，則只要放大到足夠大，元素只會集中在頁面上。我怎樣才能讓它以中心爲中心？

.col-centered { 
 
    float: none; 
 
    text-align: center; 
 
} 
 
.col-centered table { 
 
    margin: 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class='container-fluid'> 
 
    <div class='quiz-list'> 
 
    <div class='row'> 
 
     <div class='col-md-4 col-centered'> 
 

 
     This text should be centered and the table underneath should be centered as well 
 

 
     <table class="table"> 
 
      <thead> 
 
      <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <th scope="row">1</th> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">2</th> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">3</th> 
 
       <td>Larry</td> 
 
       <td>the Bird</td> 
 
       <td>@twitter</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

因爲引導。

.col-md-4上的width的默認值爲33.3333%。所以，由於div沒有浮動或邊距或任何東西，它只是簡單地與屏幕左側對齊，其中的內容居中居中，但這並不明顯。

一個解決方案是刪除col-md-4類。

.col-centered { 
 
    float: none; 
 
    text-align: center; 
 
} 
 
.col-centered table { 
 
    margin: 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class='container-fluid'> 
 
    <div class='quiz-list'> 
 
    <div class='row'> 
 
     <div class='col-centered'> <!-- this --> 
 

 
     This text should be centered and the table underneath should be centered as well 
 

 
     <table class="table"> 
 
      <thead> 
 
      <tr> 
 
       <th>#</th> 
 
       <th>First Name</th> 
 
       <th>Last Name</th> 
 
       <th>Username</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <th scope="row">1</th> 
 
       <td>Mark</td> 
 
       <td>Otto</td> 
 
       <td>@mdo</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">2</th> 
 
       <td>Jacob</td> 
 
       <td>Thornton</td> 
 
       <td>@fat</td> 
 
      </tr> 
 
      <tr> 
 
       <th scope="row">3</th> 
 
       <td>Larry</td> 
 
       <td>the Bird</td> 
 
       <td>@twitter</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

我嘗試過其他解決方案，以及，如設置寬度或明確的利潤，但似乎並沒有工作。

編輯：
哦，我明白爲什麼其他解決方案不起作用：因爲在這段代碼中，Bootstrap css被加載到頁面中的樣式塊之後。
在正常情況下，加載Bootstrap樣式表後，將樣式放入樣式表中可以很好地覆蓋它。所以你可以使用width:auto或margin:0 auto，無論你喜歡什麼。

Answer 2

在css文件，更新

.col-centered { 
    float: none; 
    text-align: center; 
} 

爲

.col-centered { 
    float: none !important; 
    text-align: center; 
    margin: 0 auto; 
}