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>

我希望分支细节文本显示在中心。我的CSS类是这样的，

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

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

Answer 1

如上所述，跨度是内联的，并没有扩展到全宽，这导致文本似乎没有居中。你可以使用bootstrap自定义类来解决这个问题：

在<li>添加类clearfix中将li扩展为其拥有的内容，然后使用引导类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;
  }

它工作正常！

Answer 2

这是因为aaraar是一个内联元素。因此，请将课程提供给<span>，同时检查您的标记。那搞砸了。纠正了一个：

<li>

输出：http://jsbin.com/barunefeku/1/edit?html,output

为什么中心对齐不通过CSS？

2 个答案: