Question

I have a container with a small fixed height and a width of 100%. It is display:block.

Inside there are two similar elements containing text. They have different font-sizes and are floated – one to the left and the other to the right.

HTML

<header>
    <h1 class="right">Title</h1>
    <h2 class="left">Slogan</h2>
</header>

CSS

header{ position:fixed; width:100%; height:5em; }
header h1{ font-size:3em; margin:0; }
header h2{ font-size:2em; margin:0; }

I don’t want to use display:table-cell. And I can’t use line-height because I am only using em and not px and font-sizes of the text elements are different.

How can I vertically center the text elements?

Answer 1

Write line-height same as height. Write like this:

header{ position:fixed; width:100%; height:5em;line-height:5em; }