Jump to content

Centering Horizontal Lists


hybrid kill3r
 Share

Recommended Posts

I know there are probably a couple hundred posts regarding this issue, but I cannot for the life of me figure out how to center my horizontal list. I added a text align with a value of center to my ul tag and the body tag in my css file. I also added a margin of auto to the left and right sides. Does anyone know what is causing this?

body {    background: #292929;    margin: 0px;    padding: 0px;    font-size: 12px;    font-family: Verdana;    color: #595951;    text-align: center;    }#navigation {    background: url(images/navigation.png) no-repeat;    height: 125px;    border: 0px;}#navigation ul {    list-style: none;    margin: 0px auto;    padding: 50px;}#navigation ul li {    float: left;    display: inline;    padding-right: 25px;}#navigation ul li a {    font-size: 14px;    color: #fff;    text-decoration: none;}

HTML:

<div id="navigation">			    			    <ul>				    <li><a href="#">Home</a></li>				    <li><a href="#">Blog</a></li>				    <li><a href="#">Portfolio</a></li>				    <li><a href="#">Resume</a></li>				    <li><a href="#">Services</a></li>				    <li><a href="#">About</a></li>				    <li><a href="#">Contact</a></li>			    </ul>			    		    </div>

Link to comment
Share on other sites

Is this what you are looking for?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title></title>  <style type="text/css">  /*<![CDATA[*/body {	background: #292929;	margin: 0px;	padding: 0px;	font-size: 12px;	font-family: Verdana;	color: #595951;	text-align: center;}#navigation {	background: url(images/navigation.png) no-repeat;	height: 125px;	border: 0px;}#navigation ul {	list-style: none;	margin: 0px auto;}#navigation ul li {	display: inline;	margin: 0 0 0 25px;}#navigation ul li a {	font-size: 14px;	color: #fff;	text-decoration: none;}  /*]]>*/  </style></head><body>	 <div id="navigation">		  <ul>			   <li><a href="#">Home</a></li>			   <li><a href="#">Blog</a></li>			   <li><a href="#">Portfolio</a></li>			   <li><a href="#">Resume</a></li>			   <li><a href="#">Services</a></li>			   <li><a href="#">About</a></li>			   <li><a href="#">Contact</a></li>		  </ul>	 </div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...