css - unable to align navbar to center -


i have searched lots of question in forum , doesnt seems help. i'm trying center navigation bar despite following of answers text-align = center; doesn't work me.

html code in asp.net:

<html lang="en">     <head>         <meta http-equiv="content-type" content="text/html; charset=utf-8">          <title>untitled</title>         <link rel="stylesheet" href="css/style.css" type="text/css" />          <!--[if lt ie 8]>             <script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/ie8.js"></script>         <![endif]-->         </head>      <body>         <ul id="nav">             <li><a href="#">home</a></li>             <li><a href="#">login</a></li>             <li><a href="#">report</a></li>             <li><a href="#">recent cases</a></li>                <li><a href="#">about</a></li>               </ul>          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>             <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>         <script type="text/javascript" src="js/scripts.js"></script>     </body> </html>  

css code:

body {  font-family: helvetica, arial, sans-serif;  background: #e3e3e3;  text-align: center; }  /* menu */  #nav { text-align: center;  background: #e5e5e5;  float: left;  margin: 0; padding: 0;  border: 1px solid white;  border-bottom: none; }  #nav li a, #nav li {     text-align: center;  float: left; }  #nav li { text-align: center;  list-style: none;  position: relative; }  #nav li { text-align: center;  padding: 1em 2em;  text-decoration: none;  color: white;  background: #292929;  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));  border-right: 1px solid #3c3c3c;  border-left: 1px solid #292929;  border-bottom: 1px solid #232323;  border-top: 1px solid #545454; }  #nav li a:hover {  background: #2a0d65;  background: -moz-linear-gradient(top, #11032e, #2a0d65);  background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); }   /* submenu */  .haschildren { position: absolute; width: 5px; height: 5px; background: black; right : 0; bottom: 0; }      #nav li ul {  display: none;  position: absolute;  left: 0;  top: 100%;  padding: 0; margin: 0; }  #nav li:hover > ul {  display: block; }  #nav li ul li, #nav li ul li {  float: none; }  #nav li ul li {  _display: inline; /* ie6 */ }  #nav li ul li {  width: 150px;  display: block; }  /* subsub menu */  #nav li ul li ul {  display: none; }  #nav li ul li:hover ul {  left: 100%;  top: 0; }   #nav li ul  

try this:

#nav{     position:absolute;     left:30%; } 

you can remove float


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -