Vertical-align with Pure CSS (from YUI)

Question

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).

Answer 1

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/

Answer 2

There you go: http://jsfiddle.net/kn88b/3/ . Used display:table for parent element, and display:table-cell; vertical-align:middle; for children content