在bootstrap中居中橫向div元素？ （文本中心無法正常工作）

Question

我遇到了引導程序的文本中心類無法正常工作的問題，請點擊這裏。

我有一個包含多個列表和其他標籤的div，但是當我應用文本中心類在屏幕上使其成爲中心時，它什麼都不做，這也適用於包含形狀div的div，這裏是我的代碼：

<div class="col-md-12 options-bar text-center"> 
    <ul class="nav nav-pills"> 
     <li class="normal-li">Ordenar por: </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Status <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Clientes <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Fecha <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Productos <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
      Asignación <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="normal-li">Ver por: </li> 
     <li><input type="radio"><label style="color: rgb(46, 116, 241);">Solicitud</label></li> 
     <li><input type="radio"><label style="color: rgb(46, 116, 241);">Producto</label></li> 
     <li id="clock"><span class="glyphicon glyphicon-time"></span></li> 
     <li> 
      <input type="text" class="form-control" placeholder="Buscar solicitudes"> 
     </li> 
    </ul> 
</div> 

正如你可以看到我用options-bar類的div是包含其餘部分的，但是類文本中心什麼都不做。

這裏是我的options-bar CSS樣式表：

.options-bar { 
    line-height: 50px; 
    width: 100%; 
} 

Answer 1

您可以將.nav.nav-pills li項目設置爲flex-grow: 1;，這將導致所有列表項均等展開以填充空間。 See this fiddle爲例。我還在下面添加了一個片段，但它只能在全屏幕中看起來正確。

.options-bar { 
 
    line-height: 50px; 
 
    width: 100%; 
 
} 
 

 
.nav.nav-pills li { 
 
    flex-grow: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<div class="col-md-12 options-bar text-center"> 
 
    <ul class="nav nav-pills"> 
 
    <li class="normal-li">Ordenar por: </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Status <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Clientes <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Fecha <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Productos <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> 
 
         Asignación <span class="caret"></span> 
 
         </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="normal-li">Ver por: </li> 
 
    <li> 
 
     <input type="radio"> 
 
     <label style="color: rgb(46, 116, 241);">Solicitud</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio"> 
 
     <label style="color: rgb(46, 116, 241);">Producto</label> 
 
    </li> 
 
    <li id="clock"><span class="glyphicon glyphicon-time"></span></li> 
 
    <li> 
 
     <input type="text" class="form-control" placeholder="Buscar solicitudes"> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

在你的div試試這個CSS類：

.vertCenter { 
    display: flex; 
    justify-content: center; 
    align-items: center; 

Answer 3

你可以使用這個定心div的。將下面的代碼添加到您要居中的div。

.centered { 
    margin: 0 auto; 
} 

注意：通常div佔據整個寬度（因爲它是一個塊元素）。確保您要居中的div寬度小於屏幕寬度。否則，您可能看不到任何區別。