Hi,
I've created a simple menu. The menu items should appear in vertical center.
I tried:
- vertical-align: center;
- vertical-align: middle;
With no succes.
Can anybody help, see code underneath.
Thanks,
Pieter
<html>
<style type="text/css">
#menu
{
width:140px;
border:0px solid #000000;
padding:0;
margin:0;
}
#menu ul
{
padding:0;
margin:0;
}
#menu li a:link,
#menu li a:visited
{
display:block;
width:100%;
height:40px;
border-bottom:1px solid #00315a;
margin:0;
text-align:left;
text-indent: 9px;
text-decoration:none;
color:#00315a;
}
#menu li a:hover
{
color:#00315a;
background:#fff700;
}
</style>
<head>
</head>
<body>
<div id="menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
</ul>
</div>
</body>
</html>use line-height instead.Hi,
Thanks! That did the trick.
I changed..
height: 21px; -> line-height: 21px;
and added..
vertical-align: center;
Cheers,
PieterNP
I've bashed my head on that wall a few times too.
You can shorten your code slightly by getting rid of the <div id="menu"> and moving the id to the ul. This would make your page slightly more semantic.Hi,
Thanks for the tip lavalamp. I made the change.
Cheers,
Pieter
I've created a simple menu. The menu items should appear in vertical center.
I tried:
- vertical-align: center;
- vertical-align: middle;
With no succes.
Can anybody help, see code underneath.
Thanks,
Pieter
<html>
<style type="text/css">
#menu
{
width:140px;
border:0px solid #000000;
padding:0;
margin:0;
}
#menu ul
{
padding:0;
margin:0;
}
#menu li a:link,
#menu li a:visited
{
display:block;
width:100%;
height:40px;
border-bottom:1px solid #00315a;
margin:0;
text-align:left;
text-indent: 9px;
text-decoration:none;
color:#00315a;
}
#menu li a:hover
{
color:#00315a;
background:#fff700;
}
</style>
<head>
</head>
<body>
<div id="menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu item</a></li>
</ul>
</div>
</body>
</html>use line-height instead.Hi,
Thanks! That did the trick.
I changed..
height: 21px; -> line-height: 21px;
and added..
vertical-align: center;
Cheers,
PieterNP
I've bashed my head on that wall a few times too.
You can shorten your code slightly by getting rid of the <div id="menu"> and moving the id to the ul. This would make your page slightly more semantic.Hi,Thanks for the tip lavalamp. I made the change.
Cheers,
Pieter