7

I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.

<ul>
    <li>
        <a href='#'>This should be centered.</a>
    <li>
</ul>

The element that needs to be centered

So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.

The broken center

Is there a way of aligning multiple lines of text to the middle without using line-height?

TylerH
  • 19,065
  • 49
  • 65
  • 86
Olical
  • 32,800
  • 11
  • 50
  • 75
  • Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) – TylerH Apr 30 '18 at 00:11

4 Answers4

7

Use display:table-cell; in your li element.

li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}

This will give you this effect:

enter image description here

Rich
  • 376
  • 5
  • 11
  • Okay this is more like it. Its just now the list looks like it has been set to `display: block;`. It has formed one big vertical line, not a horisontal one. Any idea how you can horizontally align table cells? – Olical Oct 12 '11 at 16:48
  • This solution gives you a horizontal line – Rich Oct 12 '11 at 16:55
  • Indeed it does. And it is close to what I want, although for this to work I need to have no size set for my links. So I guess this is my only option and I will just have to change where my `:hover` styles are applied to. Thanks. – Olical Oct 12 '11 at 16:59
6

write like this

a{
 display:inline-block;
 vertical-align:middle;
}

& you can give display:table-cell; to it like this

li {
vertical-align:middle;
display:table-cell;
}

but it's not work in IE7 & below

sandeep
  • 85,904
  • 23
  • 131
  • 151
  • Nope, I am afraid this will not work either. You have to use the `line-height` property for this to work. Which ruins it when you have more than one line. – Olical Oct 12 '11 at 16:46
  • @Rich also came up with basically the same answer. But you came up with it first. I will have to accept yours. Thank you both! – Olical Oct 12 '11 at 17:00
  • In my experience, it seems like the child `a` doesn't need the `vertical-align:middle` property. It works fine to only have that applied to the parent, in this case `li`. – jonkratz Nov 10 '12 at 21:35
0

I came up with this to handle vertically-aligned 100% height/width anchors inside containers:

http://jsfiddle.net/khaustic/KDfN6/ markup:

<div class="links one">
    <a href="#">One</a>
</div>
<div class="links two">
    <a href="#">Two Two</a>
</div>

css:

* { 
    /*ie box model forever!*/
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.links {
    height: 5.0em;
    text-align:center;
    outline: 1px solid #333;
    float:left;
    margin: 0 1.0em;
    overflow:hidden;
}

.links.one { width: 8em; }
.links.two { width: 4em; }

.links a {
    width:10em;
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    height: inherit;
}
khaustic
  • 1
0

You can try to change display to block for hyperlink and use paddings:

li a {display: block; padding: 30px 10px 30px 10px}
Aliaksandr Sushkevich
  • 7,264
  • 6
  • 29
  • 36
Alex Kleshchevnikov
  • 306
  • 4
  • 16
  • Close but no cigar. The elements all need to be a fixed height. Using padding would cause different heights for each element. – Olical Oct 12 '11 at 16:42