Charles Baldo
asked on
Middle Align navigation using <UL><LI>
Hi
I have a simple vertical navigation system using CSS with list <li> elements. I want to be able to vertical align the entries in the middle of the block that has been created. I tried a vertical-align: middle; with no success. The code is listed in the snippet and can be seen at
http://www.legacysportfishing.com/vertical2.htm
I have a simple vertical navigation system using CSS with list <li> elements. I want to be able to vertical align the entries in the middle of the block that has been created. I tried a vertical-align: middle; with no success. The code is listed in the snippet and can be seen at
http://www.legacysportfishing.com/vertical2.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Navigation</title>
<style type="text/css">
#navigation {
margin:0px 0px 0px 0px;
display:block;
height: 50px;
width: 265px;
font-family: verdana;
list-style: none;
text-align:left;
vertical-align: middle;
}
#navigation li
{
margin-bottom: 2px;
height: 50px;
width: 265px;
vertical-align: middle;
}
#navigation a
{
background: navy;
color: white;
display: block;
width: 250px;
height: 50px;
border-left: 5px solid skyblue;
padding-left: 10px;
text-decoration: none;
}
#navigation a:hover
{
background: skyblue;
color: white;
height: 50px;
width: 240px;
text-decoration: none;
text-align:right;
padding-right: 10px;
border-left: 5px solid navy;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="Link1.html">Link1</a></li>
<li><a href="Link1.html">Link2</a></li>
<li><a href="Link1.html">Link3</a></li>
<li><a href="Link1.html">Link4</a></li>
</ul>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you are going to need multiple lines, you may want to consider using a table instead.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked, I will always only have 1 line