11–20 of 297 posts
This might need some updating. I did a quick run through and it recommended me to use a table-cell for vertical centering. You might be able to do that more easily with flexbox.
Example:
Your text here
.item {display:table;} .item > div {display:table-cell;vertical-align:middle;}
I use this method on justindocanto.com to vertically center an unknown amount of text/elements inside a div that changes its size based on the size of the image that's inside it. Really nice technique when used correctly.
Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.
Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.
That standard exists. It's called flexbox. It was designed to solve exactly this problem (among many others), and does.
That said, as I never tire of mentioning, vertical centering was a part of the design of CSS 2.1. The technique is called "absolute centering". See CSS 2.1 10.6.4 [1]: "If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values."
[1]: http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-hei...
Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.
Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.
Flexbox solves this problem but it's still a bit unwieldy and verbose.
This is why css is fundamentally broken. Centering should be a feature in itself. I shouldn't be manipulating other attributes to achieve centering.
This might need some updating. I did a quick run through and it recommended me to use a table-cell for vertical centering. You might be able to do that more easily with flexbox.
Depends on what you need for browser support – flexbox is supported in fewer browser versions and requires using multiple rules because the spec changed significantly before finalizing: http://caniuse.com/#feat=css-table http://caniuse.com/#feat=flexbox