Vertical align text in a listitem

Question

Hey I have a list with approximately 20 elements with class names, so 5a, 5b etc.

<ul id="menu">
    <a href="#"><li><span>5a</span></li></a>
    <a href="#"><li><span>5b</span></li></a>
    ...
</ul>

CSS:

#menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    font-family: Calibri;
    border-radius: 2px;
    position: relative;
}

So it looks like this.

I want the text in the li element to be vertical in the middle. At the moment I have a dirty solution with absolute positioning but is there a way to have the text be exactly in the middle?

Answer 1

If there is only ever a single line of text per li, simply add a line-height to match the height of the li. The text will then be vertically centred within the 100px of its container:

#menu li
{
    line-height: 100px;

    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    font-family: Calibri;
    border-radius: 2px;
    position: relative;
    background:#f44;
}

Working example at JSFiddle

If you need more than one line of text, try both display: table-cell and vertical-align: middle; instead of line-height: 100px;. This (and other techniques for vertical centering) are described here.

Answer 2

I use this approach ( for ie8+):

<h2> ie8+ </h2>
<ul id="menu" class="menu">
    <a href="#"><li><span>5a</span></li></a>
    <a href="#"><li><span>5b</span></li></a>
    <a href="#"><li><span>5c</span></li></a>
    <a href="#"><li><span>5d</span></li></a>
    <a href="#"><li><span>5e</span></li></a>
</ul>

Css:

#menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    border-radius: 2px;
    position: relative;
    background:red;
}
#menu li:after{
    content:'';
    display:inline-block;
    height:100%;
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
#menu li span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

Approach ( for ie6+):

<h2> ie6+ </h2>
<ul id="menu2" class="menu">
    <a href="#"><li><div class="holder"><div>5a</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5b</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5c</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5d</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5e</div></div></li></a>
</ul>

#menu2 li .holder{
    display:table;
    width: 100px;
    height: 100px;
}
#menu2 li .holder > div{
    width:100%;
    display:table-cell;
    vertical-align:middle;
}

For ie use exprations:

#menu2 li .holder > div { margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0"); }

Follow by link

http://jsfiddle.net/X2e4A/1/

or simple way if text will not grow:

.menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    border-radius: 2px;
    position: relative;
    background:red;
    line-height:100px;
}

Answer 3

text-align: center; is used best to center the text. line-height:80px; is to center the text horizontal.

Your menu strukture seems to be a little bit weird. Something like this is more common

<div id="menu">
    <ul>
        <li>
            <a href="#"><span>5a</span></a>
        </li>
        <li>
            <a href="#"><span>5b</span></a>
        </li>
    </ul>
</div>

Link to working Fiddle

hope it answers your question :)