vertical-align: middle; having no effect.

[sepoto]

My vertical-align:middle; seems to do nothing to the text inside <span>Home</span>. I'm wondering what I might be doing wrong here.

<center><div style='border: solid 1px black; width: 100px; height: 50px; overflow: hidden; background: #fff;'><div style='display: table-cell; vertical-align: middle;'><span>Home</span></div></div><span>Staff</span><br><span>Publications</span><br><span>FAQ</span><br><span>Links</span><br><span>Contact</span><br><span>Permits</span><br><span>Figures</span><br></center>

[Ingolme]

Vertical-align only works when applied to inline-blocks or table-cell elements.You can add "display: inline-block" to the CSS of your span elements.You should move all your styles to a stylesheet and remove the <center> tags. You can center the text by setting the <div> element's text-align property to "center".

[jeffman]

If you want to vertically center a SINGLE line of text, this technique works. Set the element's height to some value. Set the element's line-height to the same value. That's it.I normally do this with block-level elements like <p> elements. I don't recall if it work on inline elements like spans.Not useful at all for multiple lines of text or text that may wrap into multiple lines.