Search code examples
cssyui-pure-css

Vertical-align with Pure CSS (from YUI)


How can I add vertical-align: middle to elements using PureCSS, from YUI?

I have three elements with have the same height, and I want that, "inside", they have vertical-align: middle.

=> Check jsfiddle: http://jsfiddle.net/kn88b/1/

The closest I get was with display: table; width: 100%, but this BUGs the "mobile version", so I want a solution for all versions (tablet/desktop/mobile).

enter image description here


Solution

  • Use flexboxes! Here is a JSFiddle that I've tested in Chrome.

    http://jsfiddle.net/kn88b/6/

    I specified display: flex on .a,.b,.c and specified margin: auto on .inside

    To make this cross browser, just make sure you use all the vendor prefixes.

    You can learn more about flexboxes here: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/