Center text in nav bar

Hey guys, this is a pretty simple fix, i'm just new to CSS.

MY CSS CODE

<style type="text/css">
body { 
overflow-y:scroll;
overflow-x:hidden;
margin-top:0px; 
margin-right:15%; 
margin-bottom:0px; 
margin-left:15%; }
</style>
<style type="text/css">
a {
text-decoration:none}
#nav {
position:absolute;
margin-left:100px;
margin-right:auto;
text-align:center;
width:400px;}
#nav {
width:1100px;
float:left;
margin:0 0 3em 0;
padding:0;
list-style:none; }
#nav li {
float:left; }
#nav {
padding-right:50%;
padding-left:50%;
width:1000px;
float:left;
margin:0 0 3em 0;
padding:0;
list-style:none;
background-color:#ffffff;
border-bottom:1px solid #0c00ff; 
border-top:1px solid #ffffff; }
#nav li a {
display:block;
padding:8px 50px;
text-decoration:none;
font-size:18px;
font-weight:bold;
color:#000000;
border-right:1px solid #ffffff; }
#nav li a:hover {
color:#0c00ff;
background-color:#ffffff; }
</style>

MY HTML CODE

<ul id="nav">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
<li><a href="4">4</a></li>
</ul>

I'm trying to center the text in the middle of my nav bar, can someone help me?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
body {
   overflow-y:scroll;
   background-color:#f0f0f0;
  }
#nav {
   width:1100px;
   border:1px solid #0c00ff;
   padding:0;
   margin:0 auto;
   list-style:none; 
   text-align:center;
   overflow:hidden;
   background-color:#fff;
  }
#nav li {
   float:left;
   width:275px; 
  }
#nav li a {
   display:block;
   border:1px solid #0c00ff;
   padding:8px 0;
   margin:2px;
   background-color:#ccf;
   font-size:18px;
   font-weight:bold;
   color:#000;
   text-decoration:none;
  }
#nav li a:hover {
   color:#0c00ff;
  }
</style>

</head>
<body>

<ul id="nav">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul> 

</body>
</html>

Center text in nav bar

bsbrilliantmojo

Panthro

bsbrilliantmojo

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week