Gregory's Blog

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

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:

view plain about
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:

view plain about
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 191 views.

There are currently 0 comments. Download attachment.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.15 July 25th, 2019.