css - Bootstrap 4 中的居中图标

Question

我有一个使用 Bootstrap 4 构建的应用程序。我需要将一些图标置于图像下方的中央。我有一个 Bootply here .我的代码如下所示:

<div class="container">
  <br>
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-md-3">
          <img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;">
          <br>
          <ul class="list-inline">
            <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-google-plus"></i></a></li>
            <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-linkedin"></i></a></li>
          </ul>
        </div>

        <div class="col-md-9">
          <div><strong>Bill Gates</strong></div>
          <p>
            Here is some information about Bill Gates.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

我的问题是，如何将图像下方的三个图标水平居中，使其看起来像一个居中的工具栏？

Answer 1

在您的 UL 标签上，删除内联列表类，它强制执行 float 。