CSS CSS Layout Basics Page Layout with the Float Property Clearing and Containing Floats

How do I vertically align the floated elements (nav bar and logo)?

I've just done the clearfix section which I understand. However I've just tried to vertically align the logo (.name) with the nav bar (.main-nav) using the following code:

''' .main-nav, .name { vertical-align: middle; } ''' But nothing happens. Is this because you can't vertical align floated elements? If so, how do I vertically align them?

2 Answers

Loris Guerra
Loris Guerra
17,536 Points

You can't set the vertical-align of a floated element.

Best solution is using FlexBox, that you'll see later in the course, with "align-items" and "align-self" properties. I link here a good article about this topic: https://www.kirupa.com/html5/centering_vertically_horizontally.htm

For now, just align items vertically on the top using the .clearfix class.

Thanks Loris, I figured that might be the case. The article is really useful too.