How to align link vertically centered

islyamov
avatar
rank newbie

newbie


Posts: 4
Joined: 2008-03-21

Posted: Mon, 2008-05-12 10:43

Hi all,

Here I am looking for how to align my links vertically on the middle of background image which is 49px high.

Thank you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.menu{  height:49px;
        width: 100%;
        }
.menu ul{
        margin: 0; padding: 0;
}

.menu ul li{
        display: inline;
height:49px;}

.menu ul li a{
        height:49px;
float: left; text-decoration: none;
        color: #000000;
        padding: 0 11px;
        background-image:url(link_bg.jpg);}

.menu ul li a:visited{
        height:49px;
        color: #000000;}

.menu ul li a:hover, .menu ul li .current{
        height:49px;
        color: #fff;
        background-image:url(hover_bg.jpg);}
</style>
</head>

<body>
<div class="menu">
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">Hello</a></li>
</ul>
</div>
</body>
</html>

jeff_way
jeff_way's picture
rank Enthusiast

Enthusiast


Posts: 137
Joined: 2007-05-07
Location: Nashville

Try setting the line-height

Posted: Mon, 2008-05-12 12:27

Try setting the line-height property of your links to 49px.

-Jeffrey Way | <a href="http://www.detacheddesigns.com/blog" title="Detached Designs Blog">My Blog </a>