如何將文字垂直對齊到父div的中間

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的小提琴，您可以在這里看到它

我嘗試使用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>

這將按要求做好。

我認為這可以為您測試工作。

將文本中的文本（除i標記外）封裝在一個范圍內。

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

Answer 4

嘗試為圖標賦予'display：inline-block'屬性，並給其垂直方向填充中心。 -答案已更新

.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` */
}