Question

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

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

这是一个提供更多帮助的小提琴 http://jsfiddle.net/axuxT/

Answer 1

最简单的方法是将line-height设置为与容器相同的高度。如果您添加了多个跨越多行的文本，这将失败（根据您的具体情况，您可以使用white-space: nowrap来避免这种情况。）
您还可以添加顶部和底部填充，例如padding: 30px 0。
您可以添加display: table-cell，然后添加vertical-align: middle。然而，这个问题的唯一问题是它不受支持＆lt; = IE8。

Answer 2

如果您知道父div的高度（例如：35px），并且您知道它不会改变，那么您只需在链接上设置line-height: 35px;，并在浏览器的内联格式中设置{{1}}将完成剩下的工作。我更新了你的小提琴来展示这种方法：http://jsfiddle.net/axuxT/1/。

<强>更新

如果你需要容器div来改变大小，那就有点复杂了。这是对您的小提琴的更新，显示了这种方法：http://jsfiddle.net/axuxT/3/。请注意，在这种情况下，内容需要显示：block，具有已知高度。它还需要一些额外的标记 - 一个额外的包装div和一个浮动的spacer div。

Answer 3

这听起来很容易，对吧？但是没有办法是正确的，你只需要margin-top或vertical-align或position: absolute; top: 50%; margin-top: -half-the-element-height-px'。

我讨厌CSS。