在字体图标后垂直对齐文本

Question

<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 ?

Answer 1

One of the ways would be to use inline-block display and middle align it - see demo below:

 .wrapper > * { display: inline-block; vertical-align: middle; } .blue { color: blue; } .white { color: white; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="col-md-4 wrapper"> <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>

Answer 2

Use CSS Flexbox . Make a parent <div> that wraps icon and text into it (in my case its icon-holder ) and make it a flexbox container using display: flex .

Have a look at the snippet below:

 .icon-holder { display: flex; /* Flex Container */ align-items: center; /* Vertically Align Content */ } .blue { color: #33b5e5; } span { color: #fff; } h4 { padding-left: 5px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="col-md-4"> <div class="icon-holder"> <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> </div>

Hope this helps!

Answer 3

You can use display: flex and can do something like below :

•  .col-md-4 { display: flex; align-items: center; } .blue { color: blue } .white { color: white; }

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-4 wrapper"> <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>