<div class="col-md-4">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
How can I display h4
element on the right of the icon and vertically aligned? Should I float left the span
?
Use CSS Flexbox. Make a parent
<div>
that wraps icon and text into it (in my case itsicon-holder
) and make it a flexbox container usingdisplay: flex
.Have a look at the snippet below:
Hope this helps!
You can use
display: flex
and can do something like below :One of the ways would be to use
inline-block
display and middle align it - see demo below: