在bootstrap内部水平div元素？ （文本中心不工作）

Question

我的文本中心类引导程序无法正常工作，这就是它。

我有一个包含多个列表和其他标签的div，但是当我应用文本中心类在屏幕上创建这个中心时它什么都不做，这也适用于包含形状中的div的div，这里是我的代码：

Audit.Id

正如你所看到的，我的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> 的div是包含其余部分的div，但是class text-center什么也没做。

以下是options-bar的css样式表：

options-bar

Answer 1

你可以用它来居中div。将以下代码添加到要居中的div中。

.centered {
  margin: 0 auto;
}

注意：通常div占据整个宽度（因为它是一个块元素）。确保要居中的div的宽度小于屏幕宽度。否则你可能看不出任何差异。

Answer 2

在你的div中尝试这个css类：

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

Answer 3

您可以将.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>