MLister MLister - 1 year ago 72
HTML Question

How to vertically center content of child divs inside parent div in a fluid layout

I have a div which contains two child divs, and they are intended to be part of fluid layout, so I can't set a fixed size for them in px.

There are two goals here:

  1. Align the two child divs horizontally, which I have achieved using
    float: left
    float: right

  2. Vertically center the text (within the child divs) relative to the parent div. The text is short and takes a single line by design.

What I have now:

Apparently, the two child divs do not take the full height of the parent div, and therefore their text are not vertically centered relative to the parent div.

Conceptually, to achieve the goals above, we can either make the child divs vertically centered within the parent div, or we can make the child divs take the full height of the parent div. What is the robust way to do so?

*Browser support: IE 9+ and other usual modern browsers.

Answer Source

I updated your fiddle:

I used display: table-cell; in order to use vertical-align: middle;