html - 在 Bootstrap 中水平居中 div 元素？ (文本中心不工作)

Question

我遇到了一个问题，bootstrap 的文本中心类无法正常工作，就是这个问题。

我有一个包含多个列表和其他标签的 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 包含其余部分，但类 text-center 什么都不做。

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

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

Answer 1

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

.centered {
  margin: 0 auto;
}

注意:通常 div 会占据整个宽度(因为它是 block 元素)。确保要居中的 div 的宽度小于屏幕宽度。否则您可能看不出任何区别。