如何水平和垂直居中我的图标？

Question

我正在尝试类似 fontawesome 的东西，并希望将图标居中：

 <div class="col-md-2">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>

如果不使用特殊的 class 来执行此操作，我如何使用 css 进行管理？我试过 text-align 、 center 等？

Answer 1

如果你can use flexbox，用align-items和justify-content就可以轻松解决。添加 border 只是为了显示 div 的一侧。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
 <div class="col-md-2" style="border: 1px black dotted; display: flex; align-items: center; justify-content: center; height: 50px;">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>
</div>
</div>

如何水平和垂直居中我的图标？

How can I center my icon horizontally and vertically?

css

font-awesome

twitter-bootstrap-3