CSS Centered Tables

Using “auto” to split up the remaining space…

Shop for web design and development books here.

CSS

In this section, I will attempt to document and demonstrate how to overcome some of the little problems that many developers encounter while transitioning from transitional to strict doctypes.

How to Center a Table with CSS

Someone seems to have forgotten that blocks need to be centered. If text-align:center is so good, why did they forget to make a block-align:center? But they did! This one’s easy—once you realize the power of that little word, auto. Applied to opposing margins, auto means, “split and use up the remaining available space.” The result: block centering, even in a fluid layout.

The following CSS means “collapse the table to it’s contents and center it.”

 table.xmp { width:auto; margin:1em auto 1em auto; border:0; background:transparent; }
 .xmp td  { padding:0 0 0 0.5em; border:0; background:transparent; vertical-align:middle; }

A CSS-centered, fluid table, with absmiddle-type text
alignment—and no proprietary deprecated markup in sight.

“If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.” CSS2.1, 10.3.3 ¶7

Absmiddle: Depricated! Another good reason to use a table…

In this section, I will attempt to document and demonstrate how to overcome some of the little problems that many developers encounter while transitioning from transitional to strict (standards-conformant) doctypes.

How to Replace Absmiddle with a Table and CSS

One of the things I recently encountered is how to replace the deprecated “absmiddle” feature of floated images using CSS. Absmiddle vertically aligns the centerline of a floated image with the centerline of a line (or paragraph) of text. So, I went online and searched references and forums for hours, and—you guessed it—it can be done, but the results are unreliable. After hours of experimentation, I finally had to conclude that (a) the CSS float just doesn’t have any such feature, and (b) the only way to do it is with a little invisible table. Observe:

In this example, we use a simple table with two cells, one for image and one for text. The graphic is exactly 100px high, and the right point is exactly 50px. The tics are 25 and 75. The CSS class xmpl simply applies vertical-align:middle.

 table.xmp { /* make it invisible and centered in the page: */
   width:auto; border:0; background:transparent; margin:1em auto 1em auto; }
 .xmp td {  /* the td the text is in */
   padding:0 0 0 0.5em; border:0; background:transparent; vertical-align:middle; }

This is some vertical-aligned text.

In the next example, we use only one table cell (could be a div, or whatever), with the image therein floated left. The CSS class .fltl applies float:left to the image. Works differently in IE and FF; and neither one works as desired. The float overrides everything, including vertical-align, margin or padding:auto applied to the text, padding-top:auto padding-bottom:auto applied to the cell or a div—I’ve tried it all, and then some more…

In addition to the above CSS, we add:

 .fltl { float:left; padding-right:10px; } /*the img*/

Notice how the float negates the cell’s vertical-align:middle property! 

The bottom line is this: There is no absmiddle-type thing in CSS. Float always aligns the top of the image and the top of the text. You can push your text around with margin and padding, you can encase the text and/or the image in various divs and spans ’till it looks right—then the user changes browser window width, the text wraps to another line, and all your careful positioning is messed up. You can take a 100px high image, put it in a div with height:100px applied, float it left, apply margin:auto, vertical-align:middle, etc, etc, etc, to the text; you can display:block it and it still won’t work right, ’till you’re blue in the face—it just won’t work.

The only reliable solution is a simple, CSS-controlled table, like the above example. Give it zero borders and transparent background, and they’ll never know it’s there.

“If there’s a line box, the top of the floated box is aligned with the top of the current line box.” CSS2.1, 9.5 ¶2

—KV5R

Leave a Reply

Your email address will not be published. Required fields are marked *