Vertically Center text within div

[sputza]

I have a div that contains a list which I am using as a menu. I need to have the text vertically centered within the list. I have tried lost of things to center the text vertically without success. How can I fix my problem? Here is the html and css:

            <div id="leftMenu">
                <ul>
                    <li class="menuTop"><a href="#" onClick="_OLEShowPDP_; return false;">My PDP</a></li>
                    <li class="menuMiddle"><a href="#" onClick="_OLEShowTraining_; return false;">My Training</a></li>
                    <li class="menuMiddle"><a href="#" onClick="_OLEShowRecords_; return false;">My History</a></li>
                    <li class="menuBottom"><a href="#" onClick="_OLEShowProfile_; return false;">My Profile</a></li>
                </ul>
            
            </div>

#leftMenu {
    position: relative;
    float: left;
    width: 160px;
    background-color:#00FF00;
    text-indent: 12px;
}

#leftMenu a {
    color: #ffffff;
    font-family: Tahoma, Arial, Helvetica;
    font-weight: bold;
    text-decoration: none;
}

#leftMenu a:hover {
    text-decoration: underline;
}

#leftMenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#leftMenu li {
    margin: 0;
    padding: 0;
}

.menuTop {
    background-image: url(images/mypdp.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
    text-align: left;
}

.menuTop:hover {
    background-image: url(images/mypdp.gif);
    background-position: -160px;
}

.menuMiddle {
    background-image: url(images/myhistory.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 31px;
}

.menuMiddle:hover {
    background-image:url(images/myhistory.gif);
    background-position: -160px;
}

.menuBottom {
    background-image: url(images/myprofile.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 34px;
}

.menuBottom:hover {
    background-image: url(images/myprofile.gif);
    background-position: -160px;
}

Thanks in advance for any help. If you need any additional info, let me know and I will post more info.

[Centauri]

I assume you mean the text vertically centered within each <li>?

Instead of applying the background images, heights and hover to the <li>s, set the <a> elements to block display and apply all the above styles to the <a>s as well as setting the line height to equal the <a> height.

[sputza]

I assume you mean the text vertically centered within each <li>?

Instead of applying the background images, heights and hover to the <li>s, set the <a> elements to block display and apply all the above styles to the <a>s as well as setting the line height to equal the <a> height.

Thanks for your reply. I understand what you are saying... I'm not sure if that can be done with my design. Here is a link to a screen shot:
http://www.lowgravity.ca/deleteme/leftMenu.gif

Thanks again for any help.

[Paul O'B]

Hi,

If you are just talking about vertically aligning the text then simply set the line-height to thesame as the height of that element.

e.g.

#leftMenu li {line-height:31px;}
.menuBottom {
    background-image: url(images/myprofile.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 34px;
    line-height:34px;
}

This assumes that text wrapping isn't going to occur otherwise the lines will be too high. If you want text to wrap then you should use equal padding top and bottom instead and lose the height.

[sputza]

Hi,

If you are just talking about vertically aligning the text then simply set the line-height to thesame as the height of that element.

e.g.

#leftMenu li {line-height:31px;}
.menuBottom {
    background-image: url(images/myprofile.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 34px;
    line-height:34px;
}

This assumes that text wrapping isn't going to occur otherwise the lines will be too high. If you want text to wrap then you should use equal padding top and bottom instead and lose the height.

Works awesome. Thanks Paul. You always bail me out when I need it.

[Centauri]

Paul's solution is the same as what I was saying, with the addition of moving the backgrounds and hover to the <a> elements - IE6 will not recognise hover on anything other than links, so your menu hover will not work in IE6.