Vertical Align

From CSS Discuss

Jump to: navigation, search

Problem: Vertical Alignment for DIV Tags

There no equivalent to valign="middle" with
tags - the CSS "vertical-align" attribute applies to inline elements, not box elements like
use tables
  • specify equal values for padding-top and padding-bottom, either in percentages or pixels. (Do not set a height explicitly)
  • position the box at top:50% and use a negative top margin to adjust the box to dead centre. See [1] for more details.hi

Here's a hack that works at least in IE and Mozilla

img.valign { height:100%; width:0px; vertical-align:middle; }

Vertically aligned content <img class="valign" />


The quirks rendering mode is the Rendering Mode where a browser tries to handle sloppy code in the way that they did in the mid- to late 90's. Basically, the browser purposefully imitates the lax parsing, rendering, and bugs in earlier browser versions so that they render the old, quirkily coded pages exactly the same as they used to.
Personal tools