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

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>

如何在图标的右侧显示h4元素并垂直对齐？我应该浮动span？

Answer 1

之一是使用inline-block Display和 Middle 对齐 - 请参见下面的演示：

.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

使用 css flexbox 。制作将图标和文本包装到其中的父 <div>（在我的情况下为icon-holder），并使用display: flex。

请查看下面的片段：

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

希望这会有所帮助！

Answer 3

您可以使用display: flex，并且可以做类似以下操作的事情：

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