我有一个使用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中的内容垂直居中?

谢谢!

最佳答案

只需使用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

10-05 20:59
查看更多