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

Answer 2

这是一个跨浏览器兼容的解决方案，用于将a-element 与 a 内的未知高度垂直对齐div：

适用于带和不带换行符的链接文本。

CSS

* { margin: 0; padding: 0 }

ul {}
ul li {
    display: table;
    height: 75px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

ul li div {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

ul li div a {
    #position: relative; /* ie hack */
    #top: -50%; /* ie hack */
    border: 1px solid green
}

这里不推荐使用 CSS hacks，而是使用条件注释。

现场演示： http: //jsfiddle.net/ahdzg/1/
有关此技巧的更多信息：http ://www.jakpsatweb.cz/css/css-vertical-center-solution.html

希望这可以帮助。否则随时问。

Answer 3

.parent_div{display:table;}.child_div{display:table-cell;vertical-align:middle;}

然后将您的链接放在子 div 中。