Text-Align, the simple case

Aligning text in a DIV container ist very simple done by the following code:

  <div style="width:100%; text-align:center;">Centered Text</div>

Vertical-Align - the complicated case

Vertical alignment of text in a DIV is a little bit more complicated, because the usual way used for table cells doesn't work with DIVs.

The code below doesn't work:

  <div style="height:3em; vertical-align:middle;">
    Not centered vertically!
  </div>

The reason is, vertical-align doesn't work for block elements by definition. Instead its usage is limited to define the alignment of inline elements. To align the text vertically, you have two choices.

The solution!

1. display the text inline with a vertical aligned DIV like:

  <div style="height:3em;">
    <div style="height:3em; width:0;
                visibility:hidden;
                vertical-align:middle;
                display:inline"></div>
    Centered vertically!
  </div>

-or- (to with less code and just a single div)-
2. display the text inside a DIV with proper padding and margin settings:

  <div style="height:3em;padding:1em 0 1em 0">
    Centered vertically!
  </div>