Question

I’m trying to create a navigation bar in html+css that looks like the image in the following link:

https://i.stack.imgur.com/E4ljN.png

Basically I have some large text in the left floated rectangle/div in gray and a list of links in a smaller font in the right floated rectangle/div in red and I would like that text to be centered vertically without having to resort to getting rid of the floats and adjusting margin-left/margin-right of the gray and red boxes. Is this possible and if so, how can it be done?

Answer 1

It seems quite hard to vertically aling text in a div.

The trick is to the following.

Suppose the following HTML:

<div id="parent">
<p id="child"> text</p>
</div>

Now you can vertically align the text by doing the following trick.

#parent{
    display: table;
    ....
 }

 #child{
    display: talble-cell;
    vertical-align: center;
 }

Doing this leads to the following result.
http://jsfiddle.net/RLchH/1/