html - 为什么中心对齐不能通过 CSS 工作？

Question

我有以下代码，

<ul class="list-group">
      <li style="background: #F3F3F3;" class="list-group-item">
        <a href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <span class="center-class">Branch Details</span>
      </li>
</ul>

我希望Branch Details 文本显示在中心。我的 CSS 类是这样的，

<style type="text/css">
  .center-class {
     text-align: center;
   }
</style>

这是我正在处理的代码 - http://jsbin.com/vunicayiho/edit?html,output我做错了什么吗？

Answer 1

如前所述，跨度是内联的，不会扩展到全宽，这导致文本似乎没有居中。您可以使用 Bootstrap 自定义类来解决这个问题:

在<li>添加类 clearfix将 li 扩展到它拥有的内容，然后是 Bootstrap 类 col-xs-1和 col-xs-11修复里面的元素。

<li class="list-group-item clearfix" style="background: #F3F3F3;">
            <a data-slide="prev" role="button" href="#carousel-example-generic" class="col-xs-1">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <span class="center-class col-xs-11">Branch Details</span>
</li>

然后你只需要设置正确的高度，即:

.center-class {
    text-align: center;
    line-height:20px;
  }

而且效果很好!