Gregory's Blog

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


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; 
}

This entry was posted on July 12, 2019 at 4:18 PM and has received 922 views.




Footer Logo

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 "Galaxie 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 Galaxie 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.

Version:

Galaxie Blog Version 3.0 (Toby's Edition) June 14th 2022 Blue Wave theme