在引导程序中水平居中 div 元素？ （文本中心不起作用）

Question

我遇到了问题，引导程序的文本中心类不起作用，就是这样。

我有一个包含多个列表和其他标签的 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>  

你可以看到我的 div 类 options-bar 包含其余部分，但类 text-center 什么都不做。

这是我的 options-bar 的 css 样式表：

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

Answer 1

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

.centered {
  margin: 0 auto;
}

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

Answer 2

您可以将.nav.nav-pills li 项设置为flex-grow: 1;，这将导致所有列表项均等扩展以填充空间。以See this fiddle 为例。我还在下面添加了一个 sn-p，但它只在全屏下看起来正确。

.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 3

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

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