Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

"It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ "

that solution

1. only works for text, which is part of eranation's rant.

2. only works if you know the exact height of the container.

3. isn't even centered: http://i.imgur.com/lz8Mq.png



1. Not true. Could have been an image, or even SVG element http://jsfiddle.net/aMMxj/55/

2. Fair enough. It would be nice to be able to set line-height to a percentage of height.

3. Bug, my bad. http://jsfiddle.net/aMMxj/51/


It's still not precisely centered. Check out this version using a table.

http://jsfiddle.net/nJy8t/

I added a background image with a grid that extends 80px from top and bottom. There's also a small margin/padding/border reset and doctype just to make sure defaults and quirks aren't messing with anything.


Yeah, I concede mine wasn't pixel-perfect.

To continue down this path of the "natural" way to vertically-center, font-size must also be explicitly set. This works http://jsfiddle.net/nJy8t/3/ . Though it's certainly not without it's flaws (we lose font-size cascading).




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: