0

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!

Community
  • 1
  • 1
rolory
  • 362
  • 1
  • 2
  • 15
  • 1
    About the "**update**": This is *not* how SO works. If a user has answered your question, accept it. If you have a NEW problem, open/create a new question, and not add on to the pre-existing one. – Terry Feb 15 '14 at 12:09
  • Write the link of the question you just removed from here I have its answer – ArmaGeddON Feb 15 '14 at 12:27
  • @KID here's the link: http://stackoverflow.com/questions/21797746/css-image-causes-problems-in-menu Thanks for helping – rolory Feb 15 '14 at 12:48

2 Answers2

4

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

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

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

Lars Ebert
  • 3,487
  • 2
  • 24
  • 46