Change font size on hover move other divs

Question

I wanted to change fonts size on hover on elements, the prolem I've encountered is that when i move on an item the other divs of the list move down. This is my code:

CSS

a{
    /* position:absolute */
    font-size:16px;
}

a:hover {
    color:#0033CC;
    font-size:18px;
}

#menu_list{
    width:859px;
    cursor:pointer;
    }

#menu_list li{
    width:130px;
    height:21px;
    display:inline-block;
    margin: 0px 0px 0px 0px;
    border:1px solid #616261; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family:sans-serif, arial, helvetica; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    }

HTML

<ul id="menu_list">
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
    <li><a>look</a></li>
</ul>

and this is a JSFiddle.

As you can see I wrote position:absolute for the element, that works, meaning that the divs stay still, but i can't figure out how to center my text if I do so. I guessed the problem was that the element didn't have top margin, so I tried that too but i guess for inline element it's impossible to set margins, or maybe I just don't now the right way.

Answer 1

You should give a line-height to the outermost inline elements (in your example that's the <li>) at least equal to the biggest size the inner elements are going to be (on hover).

Additionally, you should also give vertical-align: middle to the inner elements (the anchors); without it their bottom edges are aligned, producing the jarring visual.

There is no need for position: absolute.

See it in action.