Thursday, July 23, 2009

Vertical Centering with CSS

I've got a secret for many of you out there. You may have perused the CSS Zen Gardens of the internet in awe-stricken hope, looking for the answer to one very simple, yet extremely elusive concept... how to get your text et. al. to center vertically with cascading style sheets. First, let me say I spent a good number of hours tinkering about in the belief that I was missing just one simple point about how elements work together in HTML. No, I wasn't missing one simple point. The point, as it turns out, is that the W3C Consortium neglected to include vertical alignment capabilities for their block level elements. Don't believe me? Check out this page straight from the horse's mouth about vertically centering text and other goodies.
W3C - Centering Things

Yeah, I was a bit underwhelmed myself too. You actually have to change the display mode over to table. See, unlike other block-level elements, tables DO have vertical centering capabilities and so the workaround is to gleefully turn your DIVs, Ps, H1s, etc., etc. into TABLE wannabes. So there you have it. There is no out of the box method for vertically centering block elements in HTML via CSS without changing their display type or performing one of the other myriad CSS-kung-fu moves.

No comments:

Post a Comment