CSS Tricks: Absmiddle
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 doctypes.
How to Absmiddle with 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 table. Observe:
In this example, we use a simple table with two cells, one for image and one for text. The CSS class xmpl simply applies vertical-align:middle. The graphic is exactly 100px high, and the right point is exactly 50px. The tics are 25 and 75.
table.xmp {
border-collapse:collapse; width:auto;
border:0; margin:1em 0 1em 0; }
.xmpl { /* the td the text is in */
padding:0 0 0 0.5em; border:0; vertical-align:middle; }
 |
This is some vertical-aligned text. |
In the next example, we use 1 cell, 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…
table.xmp {
border-collapse:collapse; width:auto;
border:0; margin:1em 0 1em 0; }
.xmpl { /* the td the text is in */
padding:0; border:0; vertical-align:middle; }
.fltl { /* the img */
float:left; padding-right:10px; }
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 example 1 above. 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
