Need Help With a CSS Problem

[Xozor]

I have been trying to get my newest project's navigation centered, and I just can't figure out how to do so without messing up the way it looks. If anyone can help me do so, please help!

URL of site: http://xozordesign.com/pr/

URL of site's CSS: http://xozordesign.com/pr/style.css

I am trying to get the navigation to align to the center with the same styling that it has now. I have tried several times, and I can't figure out what I am doing wrong. The link above is the navigation as I would like it to be displayed, but just centered instead of left aligned. Any help on how to do this would be greatly appreciated. Thanks!

[Pádraig]

Did you try this? It may not work, however.

CSS

Code: Select all

body {
     text-align: center;
}

[Xozor]

Originally Posted by Pádraig

Did you try this? It may not work, however.

CSS

Code: Select all

body {
     text-align: center;
}

That doesn't do anything. I still can't come up with what I'm doing wrong here..

[Marc]

Can you not just do this:

Code: Select all

<div id="nav" align="center">
    <ul>
          <li id="current"><a href="#"><span>Home</span></a></li>
          <li><a href="news.html"><span>News</span></a></li>
          <li><a href="#"><span>Services</span></a></li>
          <li><a href="#"><span>Tech Corner</span></a></li>
          <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    </ul>
  </div>

[Xozor]

Nope, it doesn't move at all.

[Lchad]

This will move it and you will have to adjust the margin to make it appear centered.

Code: Select all

#nav ul, #nav ul li {
    list-style: none;
    margin: 0px 0px 0px 150px;
    padding: 0;
 }

[Ryan Fait]

Try:

Code: Select all

#nav ul {
  width: 400px;
  margin: 0 auto;
}
#nav ul li {
  float: left;
}
#nav ul a {
  width: 100px;
  height: 24px;
  display: block;
  float: left;
}