How to place a link on the middle of a div in height?

How do I place the link Refresh on the middle in height of the div nav_bar?

<div id="nav_bar">
<a class="nav" id="refresh" href="#">Refresh</开发者_如何学Ca>
</div>

Here is a fiddle for more help http://jsfiddle.net/axuxT/

---

• The easiest way is to set line-height to be the same height as the container. This will fail if you ever add more text that spans more than one line (dependent on your circumstances, you could avoid this with white-space: nowrap).

• You could also add top and bottom padding, e.g. padding: 30px 0.

• You could add display: table-cell and then vertical-align: middle. The only problem with this one however is that it is not supported <= IE8.

---

If you know the height of the parent div (eg: 35px), and you know it won't change, then you can just set line-height: 35px; on the link, and the browser's inline formatting will do the rest. I updated your fiddle to show this approach: http://jsfiddle.net/axuxT/1/.

---

Update

If you need the container div to be able to change size, it's a bit more complex. Here's an update to your fiddle that shows this approach: http://jsfiddle.net/axuxT/3/. Note that, in this case, the content needs to be display:block, with a known height. It also requires some additional markup - an additional wrapper div, and a floating spacer div.

---

It sounds like an easy thing to do, right? but there's no way that's correct, you just have to you margin-top or vertical-align or position: absolute; top: 50%; margin-top: -half-the-element-height-px'.

I hate CSS.