bier hier bier hier - 1 month ago 12
CSS Question

How can I center my icon horizontally and vertically?

I am trying something like fontawesome and want to center the icon:

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


without using a special class todo this with , how can I manage with css? I tried text-align , center etc?

Answer

If you can use flexbox, it can easily solved by align-items and justify-content. border is added just to show the side of the 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>