CODEWITHSUNDEEP
htmlcssvertical-alignment
eli.rodriguez
eli.rodriguez

Reputation: 490

Align <a> inside a <li>

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

Image that describe the situation

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/

Upvotes: 1

Views: 413

Answers (4)

Nix
Nix

Reputation: 5998

One solution is to give it a top margin of 21px (height of container, minus box height of element (border+height in this instance) divided by two).

Another solution, is to give it a height and line-height of 85px, effectively centering the text, but making the element taller.

At the end of the day, I'd probably go for rdiazv's solution, mainly because it's the simplest and easiest to maintain.

Upvotes: 0

rdiazv
rdiazv

Reputation: 1153

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

Upvotes: 3

Niro
Niro

Reputation: 33

Well, iv'e played with it a bit and this worked for me : 

a {
height: 40px;
width: 40px;
margin-top:22.5px;
    border: 1px solid blue;
text-decoration:none;
 }

Upvotes: 0

Chris Young
Chris Young

Reputation: 1809

You can try an approach from this site: http://phrogz.net/css/vertical-align/index.html

I've put together a quick fiddle showing this: http://jsfiddle.net/Mum5e/1/

Basically, by using absolute positioning with a top pointing to the half-way mark (50%) inside a relatively positioned element, we can get it to center. However, since we want the center of the link, not the top of the link, at the 50% mark, we change the link's top margin to offset it by half the height.

Note: by changing the link to absolute, we have to give the li a width, since the a will no longer force the li to take its width.

css:

ul {
    line-height: 85px;
}

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

a {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

Upvotes: 3

Related Questions