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 - 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，而是使用conditional comments。

现场演示：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中。

将div中的链接垂直居中

3 个答案: