Center Elements Vertically Without Tables
The drive to eradicate tables from page layout has two arguments: tables are
inherently semantic, and we should care about the semantics of our documents;
table markup is difficult to deal with - table-based style hooks cannot be easily
changed. Not everyone is worried about the first point, but anyone who has ever
needed to change the style of a page appreciates the second.
Ideally style hooks (for this article we will use this term to refer to elements
that are inserted into html purely for reasons of style), even though they be
inserted only when absolutely necessary, should be simply neutralisable from a
stylesheet. For example, using the nonsemantic div element for stylehooks and
applying to them a 'stylehook' class, as Waxpad does, means that styling that
class with the appropriate neutral properties can effectively remove all those
elements from the layout of the document. This is not so easy to do with tables.
Fortunately most kinds of layout do not require any style hooks, and almost every
kind of layout you could want can be achieved with a handful of nonsemantic, easily
neutralisable divs. Most of these techniques are obvious, but proper vertical
centering is not.
By proper vertical centering we mean an element sitting in a container that is
dynamically positioned so that its horizontal center line coincides with horizontal
center line of its container, unless it is taller than its container, in which case
its top coincides with the top of its container.
Wrap the element to be centered in a vertseed div. Set the element's top to be
minus half of its height.
Wrap the vertseed in a vertcase div. Set the vertseed's top to be 100% of its
Put the vertcase inside the container element. Set the vertcase's height to
be at minimum half of the centered element's height, and at maximum half of
the vertcase's parent's height.
Once this is done, with appropriate hacks for Internet Explorer (which does
not implement minimum and maximum heights), vertical centering is achieved.
If these style hooks were ever to be neutralised, it would be done by setting
them all absolutely positioned and 100% sized so that they filled the container,
and the element that was centered would find itself in an environment exactly the
same as if the style hooks were not there.
These steps, and many other alignment options, are implemented automatically when
selected in Waxpad. Example
Back to Waxpad