无法在一组图像链接旁边获得垂直居中的文本链接

Question

我试图将元素垂直居中于黑色矩形中。到目前为止，我将图标垂直居中，但由于某种原因，右侧的文本链接略微偏离中心。我尝试在顶部和底部添加填充，但它仍然保持偏心。我还尝试添加vertical-align，但这也不起作用。

我做了一个小提琴，让它变得更容易：http://jsfiddle.net/z0Lxfw6q/1/

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">
  <ul id="social-links">
    <li class="behance"><a href="/" target="_blank"><img src="http://i.imgur.com/KTsyaQR.png" alt="Behance"></a></li>
    <li class="twitter"><a href="/" target="_blank"><img src="http://i.imgur.com/cleZOWn.png" alt="Twitter"></a></li>
    <li class="instagram"><a href="/" target="_blank"><img src="http://i.imgur.com/USZmKla.png" alt="Instagram"></a></li>
  </ul>

  <a class="contact" href="/contact">Get in touch</a>
</nav>

CSS

#site-navigation {
background: #000;
position: relative;
width: 100%;
}

#site-navigation #social-links {
border-right: 2px solid #E0E0E0;
display: inline-block;
line-height: 0;
margin: 0 30px 0 0;
padding: 25px 0;
padding-right: 30px
}

#site-navigation #social-links li {
display: inline-block;
list-style: none;
}

#site-navigation #social-links img {
height: 26px;
}

#site-navigation .contact {
color: #fff;
display: inline-block;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}

如何将文字链接（即＆＃34;取得联系＆＃34;）垂直居中？

Answer 1

inline-block元素默认为vertical-align: bottom。

所以只需添加vertical-align: middle即可将inline-block元素垂直放置在中间位置。

Answer 2

您需要将vertical-align: middle添加到#site-navigation #social-links。

Updated jsFiddle

正如@ 4dgaurav指出的那样，inline-block元素默认为vertical-align: bottom。所以你需要改变它。