Vertical Align Text After Font Icon

2019-01-15 21:30发布

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

3条回答
叛逆
2楼-- · 2019-01-15 22:21

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!

查看更多
干净又极端
3楼-- · 2019-01-15 22:26

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>

查看更多
再贱就再见
4楼-- · 2019-01-15 22:34

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>

查看更多
登录 后发表回答