CSS menu isn't centered

Question

I have built this menu:

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 and realized that it is related in float, but I don't want to float it - I want to make it go down. 并意识到它与float相关，但我不想使其浮动-我想使其下降。

Thank you!

Answer 1

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

Answer 2

尝试将链接的line-height设置为条形的高度，在此示例中为53像素。