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