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

一尘不染

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

css

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

阅读 346

2020-05-16

共1个答案

一尘不染

一种方法是使用inline-blockdisplay并将其居中对齐-参见下面的演示：

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

2020-05-16