html - 如何在高度的 div 中间放置一个链接？

Question

如何将链接 Refresh 放置在 div nav_bar 的中间高度？

<div id="nav_bar">
<a class="nav" id="refresh" href="#">Refresh</a>
</div>

这里有一个 fiddle 可以提供更多帮助 http://jsfiddle.net/axuxT/

Answer 1

• 最简单的方法是将line-height 设置为与容器相同的高度。如果您添加了超过一行的更多文本，这将失败(根据您的情况，您可以使用 white-space: nowrap 避免这种情况)。

• 您还可以添加顶部和底部填充，例如内边距:30px 0。

• 您可以添加 display: table-cell，然后添加 vertical-align: middle。然而，这个唯一的问题是它不受支持 <= IE8。