时间戳

首页 > 解决方案 > 如何将文本与图标垂直对齐

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

问题描述

我添加了带有 p 标签的真棒图标，并且文本出现在图标下方，如何解决此问题，以便文本应垂直对齐。

如何使文本垂直对齐，使 Croydon 不应该低于图标，它应该低于 21a？

    <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;
}`

非常感谢

标签： htmlcss

解决方案

由于 font-icons 像字体一样工作，因此在您的情况下，它仅与第一行对齐是正常的！

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

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

p {
  display:inline-block;
}
<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>

推荐阅读