Menu
With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.
252
CSS Demo: vertical-align The vertical-align property can be used in two contexts: To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text. To vertically align the content of a cell in a table.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
Was looking at this problem recently, and tried:
HTML:
<body> <div id="my-div"></div> </body> CSS:
#my-div { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; background: red; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } Here's the Fiddle:
http://jsfiddle.net/sTcp9/6/
It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).
180
Note: This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.
Center the child elements of a div box by using the box-align and box-pack properties together.
Example:
div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } 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
