5

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

Programmeur
  • 1,483
  • 4
  • 22
  • 32

2 Answers2

6

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/

Eli White
  • 1,014
  • 1
  • 10
  • 20
  • What about browser compatability ?? – Nitesh Apr 07 '14 at 07:06
  • Thank you, Eli. Browser compatibility here: http://caniuse.com/flexbox – Will not be compatible with *non-actual* browsers, but -until now- is the best answer, since works with just CSS and do not use `media queries` (my second way out). – Programmeur Apr 07 '14 at 07:11
  • 2
    What do you mean by "non-actual" browsers? Flexbox support is pretty wide reaching once you use the appropriate prefixes and such. – Eli White Apr 07 '14 at 07:23
  • You are right, I don't know where I saw that. Sorry and thank you for yout answer. :-) – Programmeur Apr 07 '14 at 07:26
  • 3
    Actual in spanish is the equivalent of modern in english. For those who might be confused by this statement. – Jason Jul 29 '14 at 16:08
  • This technique is broken in Firefox, and it doesn't really center in IE. I managed to fix the fact that it breaks in FF on every element by saying `display: inline-flex`, but centering still broken. Any idea how to get this working in browsers other than Chrome? – Zachary Dow Nov 05 '15 at 18:31
1

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

n1kkou
  • 3,096
  • 2
  • 21
  • 32
  • Look at the 'mobile version' (resize jsfiddle preview window to a smaller size). This is the bug I said, `.a` gets a bigger size than `.b` and `.c`. (image: http://i.imgur.com/wHfmAzP.png) – Programmeur Apr 07 '14 at 06:41