web-dev-qa-db-fra.com

Comment aligner centralement un float: menu de navigation ul/li de gauche avec css?

J'ai donc le CSS suivant en place pour afficher une barre de navigation horizontale en utilisant:

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation li {
  float: left;
  margin: 0 1.15em;
  /*    margin: 0 auto;*/
}

.navigation {
  /*    width: auto;*/
  /*    margin: 0 auto;*/
  text-align: center;
}

Ma question est la suivante: comment aligner la barre de navigation au-dessus du titre?

htmlcsscss-float
26
Adam Taylor

Donnez à votre .navigation ul une largeur et utilisez la marge: 0 auto;

.navigation ul 
{
  list-style: none;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}
21
Emily

Voici une solution qui ne nécessite pas de spécifier la largeur de votre ul .

67
Ben Marini

Bien, pour utiliser margin:0 auto sur quelque chose, il doit avoir une largeur définie. La meilleure solution consiste probablement à:

ul li {
  display: inline;
  list-style-type: none;
}
ul {
  text-align:center;
}
13
Fat Lotus

Il existe peu de paramètres tels que float, margin qui peuvent empêcher ce code de fonctionner correctement. Cela fonctionne aussi dans IE7. J'ai eu ce code de un article sur CSS Wizardry .

.navigation ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;/*make this change*/
 }
.navigation li
 {
    float: none;/*make this change*/
    display:inline;/*make this change*/
    margin: 0 1.15em;
 /* margin: 0 auto; */
 }
 .navigation li a {
    display:inline-block;/*make this change*/
 }
 .navigation 
 {
  /*width: auto;*/
  /*margin: 0 auto;*/
    text-align: center;
 }
5
Nizam Kazi

Vous pouvez définir le <li> sur display: inline, puis définir text-align: center sur le <ul>. Ce faisant, vous pouvez supprimer le float: left de la liste et vous n'avez pas besoin d'avoir une largeur fixe pour la barre de navigation comme vous le feriez si vous utilisiez margin: 0 auto.

<html>
  <head>
    <style>
      ul { 
        list-style: none;
        text-align: center;
      }

      li {
        display: inline;
        margin: 0 1.15em;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </body>
</html>
2
John Kugelman

Celui-ci fonctionne très bien avec moi! (si j'ai raison: IE7 +)

Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/

.nav{list-style:none; text-align:center;}
.nav ul{list-style:none;}
.nav li{display:inline;}
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;}

<nav class="nav" role="navigation" aria-label="main navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Onze producten</a></li>
    <li><a href="#">Impressie</a></li>
    <li><a href="#">Media</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
2
Marc
ul {
 display: inline-block;
 text-align: center;
}
1
techloris_109
.navigation ul 
{
  list-style-type: none;
  padding: 0px;
  width: 200px;
  margin: 0 auto;
}
0
Ravi Chauhan

Si vous voulez continuer à utiliser votre floated LI dans votre code, vous pouvez utiliser ceci:

JSFiddle: https://jsfiddle.net/Lvujttw3/

<style>
.wrapper {
    width: 100%;
    background-color:#80B5EB;
    text-align: center;
    }
.intWrapper {
    display: inline-block;
    }
.mainMenu {
    padding: 0;
    min-height: 40px;
    margin:auto;
    }
ul {
    list-style-type: none;
    }
ul li {
    float: left;
    font-size: 15px;
    line-height: 40px;
    }
ul li A {
    display: block;
    color: white;
    font-weight: bold;
    font-family: Arial;
    text-decoration: none;
    min-height: 40px;
    padding: 0 36px;
    }
</style>

<div class="wrapper">
    <div class="intWrapper"> 
        <ul class="mainMenu">   
            <li><a href="one.htm" style='background-color:red'>ITEM ONE</a>
            </li><li><a href="two.htm">ITEM TWO</a>
            </li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>        
            </li>   
        </ul></div>
    </div>
</div>
0
Niente0