html - 在 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;
}