在一个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;
}

但是边距并没有将链接垂直居中。
有什么想法吗？

- Jackie

---

链接文本是否总是在一行中，或者如果出现换行符，它是否应该看起来很好？ - doptrois

如果您的链接只有一行 - http://jsfiddle.net/SE7aB/ - Zoltan Toth

为什么你在那里放了一个div？你可以直接给li设置样式...另外，请提供一个fiddle，其中包含导致链接“不对齐”的代码。 - Ortiga

这只是将div对齐到顶部，如果我向列表项添加更多数据，它应该在出现换行时看起来很好。Zoltan，当这个静态定义的50px在较小的设备上使用时，会对网站产生什么影响？目前这是响应式的，我正在尝试避免实际像素计数（除非是1或2像素）。我尝试了line-height: 100%，但没有成功。 - Jackie

@Jackie，下面的任何答案都解决了你的问题吗？ - doptrois

6种不同的垂直居中方法 http://www.vanseodesign.com/css/vertical-centering/ - Aesdotjs

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

- Luis

---

我想让它们在同一“行”上，所以如果我通过添加width:20%来更改它，它会再次破裂... http://jsfiddle.net/WLQAS/2/ - Jackie

@Jackie 我认为这个答案解决了你的问题。你可以调整Luis的代码，使其在一行上：http://jsfiddle.net/WLQAS/7/。只要容器足够宽以容纳内容，它就应该在一行上。 - Nick Rolando

这里的问题是没有通用的宽度，而且如果在小屏幕上限制文本只能显示一行的话，我也不确定这是否是一个好主意。 - Jackie

感谢khaled_webdev提供的纠正，以及@Shredder所提出的建议。我已经对这个答案进行了最后编辑。这一切都解决了问题吗，Jackie？ - Luis

能否以一种方式将文本包装起来，使其仅适合容器大小？ - Playmaker

Answer 2

这是一个跨浏览器兼容的解决方案，用于在一个未知高度的

内垂直对齐a元素：

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

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 Hack，应使用条件注释。

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

希望这可以帮到您。否则，请随时询问。

- doptrois

---

我将li元素转换为div元素，它仍然运行良好。 - nu everest

Answer 3

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

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

- Daniel Msanii