字体图标后的文本垂直对齐 [英] Vertical Align Text After Font Icon

问题描述

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

如何在图标右侧显示h4元素并垂直对齐?我应该左移span吗?

How can I display h4 element on the right of the icon and vertically aligned? Should I float left the span?

推荐答案

方法之一是使用inline-block显示和中间对其进行对齐-参见下面的演示:

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>

这篇关于字体图标后的文本垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！