CODEWITHSUNDEEP
javascripthtmlcss
rolory
rolory

Reputation: 362

CSS menu isn't centered

I have built this menu:
JSBIN EDIT ; JSBIN DEMO
As you see, the menu isn't centered at the middle of the bar, he's centered up. However, I want to make it go lower, exactly at the middle.

So, I had an idea to do margin-top: 26px because the bar's height is 53 pixels, but it doesn't change anything. I also did margin: 0 auto and text-align:center.

I read this STACKOVERFLOW and realized that it is related in float, but I don't want to float it - I want to make it go down.

Thank you!

Upvotes: 0

Views: 62

Answers (2)

Lars Ebert-Harlaar
Lars Ebert-Harlaar

Reputation: 3537

Try setting the line-height of the links to the height of the bar, in this example 53 pixels.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You need to give the line height by using line-height. Okay, updated, the line-height trick doesn't work!!! And also, giving this to the <a> tag does the trick:

width: auto;
display: inline-block;

Fiddle: http://jsbin.com/cayob/2

Upvotes: 4

Related Questions