Menu
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).
518
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.
Then we can add the clearfix hack to the containing element to fix this problem: There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding: I am vertically centered. To center both vertically and horizontally, use padding and text-align: center: I am vertically and horizontally centered.
The vertical-align property sets the vertical alignment of an element. yes. Read about animatable Try it The numbers in the table specify the first browser version that fully supports the property. The element is aligned with the baseline of the parent.
You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element. But issues arise on multiple fronts if you're trying to combine both vertical and horizontal alignments.
Another method for aligning elements is to use the float property: Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below). Then we can add the clearfix hack to the containing element to fix this problem:
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/
167
There you go: http://jsfiddle.net/kn88b/3/ . Used display:table for parent element, and display:table-cell; vertical-align:middle; for children content
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
