Question

我遇到了一些CSS的问题。我有一个联系人详细信息列表，旁边有一个大图标，我希望文本在图标的中间对齐，而不是在底部。

这是我目前的CSS / HTML

HTML

<div class="links">
    <div><i class="fa fa-envelope"></i> <a href="mailto:{$venueInfo.email}">info@example.com</a></div>
    <div><i class="fa fa-phone"></i> 01234 567 890</div>
    <div><i class="fa fa-facebook"></i> <a href="{$venueInfo.facebook}">Facebook</a></div>
    <div><i class="fa fa-twitter"></i> <a href="https://www.twitter.com/@{$venueInfo.twitter}">Twitter</a></div>
</div>

CSS

.links div {
    margin:10px 0px;
}

.links i {
    font-size:25px;
    width:30px;
    text-align:center;
}

.links a {
    color:#000000;
}

我已经设置了HTML / CSS的小提琴，你可以看到它here

我尝试使用display:table-cell;和vertical-align:middle，但是通过整个布局关闭。

编辑：更新了使用FontAwesome图标的小提琴

Answer 1

将float:left添加到您的班级fa，如下所述：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
}

JSFiddle

Answer 2

不知何故，图片没有显示在小提琴上，但您可以尝试以下代码：

.links div {
    margin:10px 0px;
    height: 30px;
    verticle-align: middle;
}

度过愉快的一天。

<强> *更新

只需更新以下样式并保持原样：

.links i {
    font-size: 25px;
    width: 30px;
    text-align: center;
    float: left;
    padding-right: 5px;
 }

Answer 3

只需封装i标签和带有span

的标签

<div><span><i></i><a></a></span></div>

这样做会很好。

我认为这对您有用test。

将文本封装在div中的div（除了i标签之外）。

  .links div {
    margin:10px 0px;
    height: 30px;
    display: table;
  }
  .links div span{
    display:table-cell;
    vertical-align:top;
    margin-left: 5px;
  }

Answer 4

尝试给出＆＃39; display：inline-block＆＃39;图标的属性，并给填充垂直居中。 - 回答更新

.links a {
color: #000;
padding: 1px;
display: inline-table;
vertical-align: middle;
height: 30px;
}
.fa-envelope:before {
content: "\f0e0";
display: inline-block;
padding-top: 5px;
}

Answer 5

问题在于你i内的真实情况。字体基线与i之间存在差距。

您可以在此示例中清楚地看到：http://jsfiddle.net/abhitalks/Bjdw2/29/

在不改变代码的情况下，您可以快速执行此操作：

演示：http://jsfiddle.net/abhitalks/Bjdw2/31/

.links i {
    ...
    line-height: 25px; /* equal to your font-size */
    vertical-align: middle; /* to align vertically against its sibling */
    padding-top: 4px; /* to offset the gap of font inside `i` */
}

如何将文本垂直对齐父div的中间

5 个答案: