Hello. I have a nav containing different different dropdowns and normal elements.
I would like to align it to the center vertically. The header should be min-height:56px; and height:8%;
I tried to do it as you can see in my code: https://jsfiddle.net/t8ts95b5/
Can you help me find my problem?
Thank you
Sorry, but I don’t understand what you want?
What do you mean by “it” exactly? 
Are you referring to the text in the nav (Element1, Element2 etc) which already seem to be centred in the nav or did you want the whole nav vertically centred in relation to something else? The text is centred but because you have no letters with descenders it may look slightly off center a bit. If those words are fixed and not changing you could tweak the padding-top to move the letters down a bit if that was what you were referring to.
Or did you mean the dropdown?
I can’t really see anything that needs to be vertically centred in that demo that isn’t already in the right place.
That 8% height won’t be obeyed because elements cannot base their height on percentages unless there is an unbroken chain of parents who also have their height defined explicitly all the way back to the body and html elements. It is very rare that you would want to set a height limit like that anyway,
Hi @jpyamamoto9
I agree with all what @PaulOB already said.
When I look at the JsFiddle I notice the vertical-align is put on the nav but there is no other element on the same line that the nav can align to.
If I assume you mean 8% of the viewport height, you could use the “vh” unit that is referring to the viewport.
Again assuming you meant to vertical align the nav to the “8%” height of the viewport; I added a pseudo element to the nav’s container as an inline-block that can vertical align with the nav.
The updated https://jsfiddle.net/t8ts95b5/2/
Take it as an example to play with even if it’s not the solution you wanted and please post the answers to Paul’s questions so you can get the help you asked for.
2 Likes
Sorry if I wasn’t clear enough.
What I’d like to do is to align the nav itself to the center of the header vertically.
When the header is set to its min-height: 56px, the nav is in the correct position, however if my screen is bigger, so that the height of the header is 8% (or 8vh as @Erik_J pointed) the nav stays in the top while the header is bigger than 56px, so there’s a gap below. What I want is to align the whole nav to the center.
Was I clear enough? If not please let me know and I’ll try again.
Thank you
I believe that is what Erik has given you in his fiddle above. The nav is vertically aligned within the header no matter the height of the header. (Although you need to remove the erroneous bracket that Erik inadvertently left in place }} )
As Erik said you can for modern browsers use the VH unit instead of percent but I still feel that the 8vh is somewhat of a magic number and not something I would usually be using in a real site unless of a course there is a specific reason for it. However it should work ok if that is your purpose.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.