如何将文本与图标垂直对齐

Question

我添加了带有p标签的精彩图标，文字出现在图标下方，如何解决这个问题，以便文本应该在自己的位置上进行对齐。

    <p><i class="fas fa-map-marker-alt"></i>21a George Street<br> Croydon CR0 1LA</p>

`.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}`

非常感谢

Answer 1

由于font-icons的工作方式与字体类似，因此在您的情况下，它只与第一行对齐是正常的！

解决方案可能是将所有内容嵌套在div中，并在段落中使用display:inline-block，如下所示：

＆＃13;

＆＃13;

.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}

p {
  display:inline-block;
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <div>
    <i class="fas fa-map-marker"></i>
    <p>21a George Street<br> Croydon CR0 1LA</p>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可能希望将i与文本内部分开，以便我们可以控制它们。

为了解释和视觉效果而在div上设置样式。

div {
  border: 1px solid;
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

.fa {
  font-size: 30px;
  color: #C1761B;
  display: inline-block;
  border: 1px solid;
  vertical-align: middle;
}

p {
  border: 1px solid;
  vertical-align: middle;
  display: inline-block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <i class="fa fa-map-marker"></i>
  <p>21a George Street <br>Croydon CR0 1LA</p>
</div>