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>
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Jeffrey Dake
If you are going to need multiple lines, you may want to consider using a table instead.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That worked, I will always only have 1 line
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
