将div中的链接垂直居中

Question

我有一个无序列表......

<ul class="hide">
  <li class="home">
    <div class="link">
      <a href="/">Home</a>
    </div>
  </li>
  <li class="about">
    <div class="link">
      <a href="/about">About Our Community</a>
    </div>
  </li>
  <li class="contact">
    <div class="link">
      <a href="/contact">Contact Us</a>
    </div>
  </li>
</ul>

我的CSS看起来像这样....

#sitenav ul li .link a {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;
  margin-top: auto;
  margin-bottom: auto;
}

但边距不会垂直居中

有任何想法吗？

Answer 1

这个解决方案可以为您服务:http://jsfiddle.net/WLQAS/8/

margin-top: auto;并且margin-bottom: auto;不能垂直对齐对象.

更新了CSS

li {
  color: #555;
  text-decoration: none;
  float: left;
  padding-right: 3px;    
}

.link {
    vertical-align: middle;
    display: table-cell;
    height: 50px;
}