CODEWITHSUNDEEP
cssyui-pure-css
Programmeur
Programmeur

Reputation: 1531

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

Upvotes: 5

Views: 5977

Answers (2)

Eli White
Eli White

Reputation: 1024

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/

Upvotes: 6

n1kkou
n1kkou

Reputation: 3142

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

Upvotes: 1

Related Questions