Les feuilles de style CSS pour centrer le LI éléments dans ma barre de navigation DIV

J'ai une barre de navigation sur mon blog, à l'intérieur d'un peu de divs. J'ai été le tordre pour 3 heures, mais je n'arrive toujours pas à comprendre pourquoi le li éléments ne sont pas centré dans le milieu de la barre de navigation div. Quelqu'un peut-il aider s'il vous plaît? Voici mon code:

#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;}
.navbarleft{width:738px; text-align: center;}

#nav {margin: 0; padding: 0; list-style: none; text-align:center;}
#nav ul { list-style: none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; }
#nav li {list-style: none; margin: 0; padding: 0; text-align:center; background: #FFF;}

#nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; }
#nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;}

#nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;}
#nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;}

#nav li {float: left; padding: 0; }
#nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;}
#nav li ul a {width: 180px; text-align:center;}
#nav li ul ul {margin: -32px 0 0 171px; text-align:center;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;}
#nav li:hover, #nav li.sfhover {position: static;
}

#main_navigation {
width: 100%;
margin-auto;
text-align : center;
}

<div id="main_navigation">

<div id='NavbarMenu">

<div class='navbarleft'><center><ul id='nav'>

<li><a href="/">Home</a></li> 
<li><a href="/about.me">About</a></li>
<li><a href="/ask">Ask</a></li>
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li>
<li><a href="/support">Submit</a></li>
<li><a href="/tagged/typography">Typography</a></li>
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li>
<li><a href="/FAQ">FAQ</a></li>

</ul></center></div></div></div></center>

Normal j'utilise float:left mais mieux juste de le remplacer par: display:inline-block;text-align:center c'est tout

InformationsquelleAutor James Charless Dickinson | 2011-04-22

css

2

Cela pourrait être un bon début:

http://jsfiddle.net/wXjj8/
- Cela a fonctionné PARFAITEMENT. merci!!!!: )
InformationsquelleAutor gutierrezalex
1

essayez de changer
```
margin-auto;
```
à
```
margin: 0 auto;
```
Vous ne devez pas utiliser le centre de balises, comme dans la dernière html communiqués de centre de balises sont obsolètes.

InformationsquelleAutor Version1

Votre code est plein de fautes de frappe. <center> balise est déconseillé.

<!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>
<title></title>
<style type="text/css">
#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;}
.navbarleft{width:738px; text-align: center;margin:0 auto;}
#nav {margin: 0; padding: 0; list-style: none; text-align:center;}
#nav ul {list-style:none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; display: inline-block;}
#nav li {margin: 0;padding:0;text-align:center;background:#FFF;display:inline-block;}
#nav li a {display: inline-block;}
#nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: inline-block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; }
#nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;}
#nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;}
#nav li {float: left; padding: 0; }
#nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;}
#nav li ul a {width: 180px; text-align:center;}
#nav li ul ul {margin: -32px 0 0 171px; text-align:center;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;}
#nav li:hover, #nav li.sfhover {position: static; }
</style>
</head>
<body>
<div id="main_navigation">
<div id="NavbarMenu">
<div class="navbarleft">
<ul id="nav">
<li><a href="/">Home</a></li> 
<li><a href="/about.me">About</a></li>
<li><a href="/ask">Ask</a></li>
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li>
<li><a href="/support">Submit</a></li>
<li><a href="/tagged/typography">Typography</a></li>
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li>
<li><a href="/FAQ">FAQ</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Ce centre de eux. Cependant, vous avez de nombreux éléments dans le menu pour s'adapter à tous dans width:738px; comme vous l'avez spécifié. Vous aurez à réduire certains des paddings probablement.

EDIT: j'ai FINALEMENT eu... passons. 🙂

InformationsquelleAutor easwee

Vous devez vous connecter pour publier un commentaire.