4 ms·
"It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ http://jsfiddle.net/aMMxj/10/ " that solution 1. only works for text, wh
by timb 14y ago
"It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ 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 http://i.imgur.com/lz8Mq.png
- mcgwiz 14y ago1. Not true. Could have been an image, or even SVG element http://jsfiddle.net/aMMxj/55/ 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/ http://jsfiddle.net/aMMxj/51/
- timb 14y agoIt's still not precisely centered. Check out this version using a table. http://jsfiddle.net/nJy8t/ 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.
- mcgwiz 14y agoYeah, 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/ http://jsfiddle.net/nJy8t/3/ . Though it's certainly not without it's flaws (we lose font-size cascading).