Align <a> inside a <li>

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

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/

rdiazv · Accepted Answer · 2012-12-09 21:10:21Z

3

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

edited Dec 9, 2012 at 21:10

answered Dec 9, 2012 at 21:04

rdiazv

1,1637 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eli.rodriguez Over a year ago

thanks. but your approch do not allow me to set a width and height for the "a" tag

Nix Over a year ago

It's cross-browser in the sense that it is supported by IE8 and above, plus all the other major vendors. See quirksmode.org/css/display.html

eli.rodriguez Over a year ago

Yes this is not compatible with IE8 and below but in my case is not necesary , for a cross-browser approach would user @Chris solutions that works very well.

Chris Young · Accepted Answer · 2012-12-09 21:01:23Z

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; }

@rdiazv OP doesn't state any such thing, if it is like that than your solution goes better..
@rdiazv - it should work for more than one line, if the line-height of the a is reduced, see: jsfiddle.net/Mum5e/6
Simplicity is good - I was merely honoring the css provided in the OP (fixed height, fixed line-height); I believe that between our two answers, we provide both available approaches well

Niro · Accepted Answer · 2012-12-09 21:09:35Z

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; }

Nix · Accepted Answer · 2012-12-09 21:15:25Z

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.

Collectives™ on Stack Overflow

Align <a> inside a <li>

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Related