Question

I am trying to align <a> tags inside <li> but i can do it verticaly. But the <a> is allways in the top and i want to center verticaly and horizontaly the <a> tag

How you can see at the image. I need A. but Getting B.

This is the HTML

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<ul>​

And this the CSS

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    line-height: 85px;
    border: 1px solid red;
}

a {
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

​You can see the jsfiddle

http://jsfiddle.net/Mum5e/

Answer 1

You can try using display:table-cell and vertical-align:middle. As I recall, this is a cross browser solution.

See this Fiddle

Edit: with fixed width anchors: Fiddle