Vertically centering an inline list in a header


#1

I'm very new to this, so please bear with me...

On several of these projects the header contains an inline list of links. I'm having a hard time writing css to center the text across the header. It ends up at the top. I've messed around and tried to figure it out. I've looked at the html/css through chrome on the "what it supposed to look like" link. Any help would be appreciated..


#2

Hey Joseph,

This centering guide should help you :slightly_smiling:

https://css-tricks.com/centering-css-complete-guide

If you apply equal padding-top and padding-bottom that adds up to the height of the parent element, your links should line up vertically centered :slightly_smiling:


#3

Thanks for the response zystvan, but i'm still having an issue..

I can't get "padding-top:" to do anything. Left/right/bottom padding all has an effect, but the words are still at the top of the header.

Just for more info, it's a ul displayed inline. I've changed the background and text colors, font, etc. I keep running in to this issue working through these projects and I'm getting frustrated that I can't figure it out...


#4

@cjcon01 Hm, could you copy/paste your code into a Fiddle so I can see it, not just guess as to the problem?


#5

https://jsfiddle.net/kvg83dpf/#&togetherjs=9n3mUTPI6C

not sure if i did that right.


#6

@cjcon01 Nope, that's great :slightly_smiling:
Check here:

https://jsfiddle.net/zystvan/kvg83dpf/1/

↑ The links should be centered vertically now, and you can see how I did it:

  1. Manually set the font-size of the links, so I know what it is. As long as you know what it is, you don't really need to do this, I just like having that extra confirmation I'm doing everything right.
  2. Add padding-top and padding-bottom to the parent element (you had it on the children, the <li>s) that is equal to 1/2 the height of the parent minus 1/2 the font size. Since height is 80px and the font-size is 16px, that would be 32px of padding on both the top and bottom of the parent element (.header .container in this case)

Does this help you? :slightly_smiling:


#7

awesome. thanks a lot!


#8

@cjcon01 Glad I could help you :slightly_smiling: