Using top: auto will not work when vertically aligning text within multiple block level elements.
Jul 12 |
CSS2 specifies that block level elements are stacked vertically from top to bottom in normal flow. If you only have one block level element, the the top and bottom margins will be zero and these declarations will be calculated correctly. For example, the following code will work to vertically align the text:
.slide#slide02 .wrapper {
top: auto;
left: 5%;
text-align: left;
padding: 0;
}
However, if you have more than one block level element in the same flow, the code will not work as the auto margins will not be calculated correctly. When you're using multiple block level elements, use absolute positioned elements to vertically align the text like so:
.slide#slide02 .wrapper {
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
left: 5%;
text-align: left;
padding: 0;
}
Tags
CSSThis entry was posted on July 12, 2019 at 4:18 PM and has received 1402 views.