[英]Center horizontally div elements inside bootstrap? (text-center not working)
我在引導程序的文本中心類上無法正常工作,這就是問題。
我有一個包含多個列表和其他標簽的div,但是當我應用text-center類使該中心在屏幕上不起作用時,這也適用於包含形狀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是包含其余部分的div,但是text-center類沒有任何作用。
這是我的CSS樣式表的options-bar
:
.options-bar {
line-height: 50px;
width: 100%;
}
您可以使用它來使div居中。 將以下代碼添加到要居中的div中。
.centered {
margin: 0 auto;
}
注意:通常div占據整個寬度(因為它是一個block元素)。 確保要居中的div的寬度小於屏幕寬度。 否則,您可能看不到任何區別。
在您的div中嘗試以下CSS類:
.vertCenter {
display: flex;
justify-content: center;
align-items: center;
您可以將.nav.nav-pills li
項目設置為flex-grow: 1;
這將導致所有列表項均等擴展以填充空間。 有關示例, 請參見此小提琴 。 我還在下面添加了一個代碼段,但它僅在全屏模式下看起來正確。
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.