Question

I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.

The following resource seemed to be exactly what I need:

http://www.css4you.de/Texteigenschaften/vertical-align.html

and

http://www.css4you.de/example/vertical-align.html

Here’s my HTML:

<div style="border: 1px solid purple;">
  <h1 style="border: 1px solid red; display: inline;">Textext</h1>
  <span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;"><a href="/admin/login.xhtml">Log In</a></span>
</div>

The CSS ID selector for logindisplay doesn’t exist. h1 is just

h1
{
  font-size: 18pt;
}

I basically did everything as in the resource above, but it doesn’t work – neither on IE9 nor on FF. Here’s what I get:

Does anybody know what I’m doing wrong?

Note: Workarounds/hacks aren’t desired. (One would be to set padding-top: on the span…)

Answer 1

Using float:right negates the vertical-align as you found. Mark’s suggestion doesn’t work with position:relative on the div? In which case, line-height seems like the easiest way.