Question

我有一个使用Bootstrap 3的网页。在这个页面中，我需要在内联列表中垂直对齐一个图标。此图标位于一个圆圈内。所以，我希望整个圆圈垂直对齐。我有一个Bootply设置here。在这个Bootply中，我有以下代码：

<div class="row">
  <div class="col-xs-12">
    <ul class="list-inline">
      <li><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li>
      <li>
        <a href="https://www.example.com" style="font-size:16px;">Some Page</a>
        <div style="font-size:14px;">A longer line of test that describes the link</div>
      </li>
    </ul>    
  </div>
</div>

如何将第一个li中的内容相对于第二个li中的内容垂直居中？

谢谢！

Answer 1

只需使用vertical-align: middle;

即可

.list-inline>li {
  vertical-align: middle;
}

http://www.bootply.com/BxgnmdnKZt

此外，您可能需要考虑使用media对象..

    <ul class="media">
      <li class="media-left media-middle"><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li>
      <li class="media-right">
        <a href="https://www.example.com" style="font-size:16px;">Some Page</a>
        <div style="font-size:14px;">A longer line of test that describes the link</div>
      </li>
    </ul>

http://www.bootply.com/pR9JHBBSAE

Bootstrap - 垂直对齐列表中的图标

1 个答案: