Using top: auto will not work when vertically aligning text within multiple block level elements.
Jul 12

Using top: auto, margin: auto, margin-top: -50%, etc, will not work when vertically aligning text within multiple block level elements. The problem with these css declarations in block level elements is that the values would be calculated as zero when they are calculated relative to the width of outer blocks.
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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org .slide#slide02 .wrapper { top: auto; left: 5%; text-align: left; padding: 0; } 1.slide#slide02 .wrapper { 2 top: auto; 3 left: 5%; 4 text-align: left; 5 padding: 0; 6} |
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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org .slide#slide02 .wrapper { position: absolute; top: 50%; display: table-cell; vertical-align: middle; left: 5%; text-align: left; padding: 0; } 1.slide#slide02 .wrapper { 2 position: absolute; 3 top: 50%; 4 display: table-cell; 5 vertical-align: middle; 6 left: 5%; 7 text-align: left; 8 padding: 0; 9} |
This entry was posted on July 12, 2019 at 2:18 PM and has received 691 views.
Download Galaxie Blog
Subscribe
Tags
Recent Posts
Recent Comments
Archives
Monthly Archives
CFBloggers Feed
_UNKNOWNTRANSLATION_ |