web-dev-qa-db-fra.com

Comment centrer une barre de navigation avec CSS ou HTML?

J'ai du mal à centrer la barre de navigation sur cette page .

J'ai essayé nav { margin: 0 auto; } et bien d'autres méthodes, mais je ne parviens toujours pas à le centrer.

htmlcssnavcentering
8
tokyowp
#nav ul {
    display: inline-block;
    list-style-type: none;
}

Cela devrait fonctionner, je l'ai testé sur votre site.

enter image description here

20
morgar

Ajouter du CSS:

div#nav{
  text-align: center;
}
div#nav ul{
  display: inline-block;
}
9
Niclas Sahlin

Si vous avez votre <ul> de navigation avec la classe #nav .__, vous devez alors placer cet élément <ul> dans un conteneur div. Faites votre conteneur div la largeur de 100%. et définissez l'élément text-align: sur le centre du conteneur div. Ensuite, dans votre <ul>, définissez cette classe pour avoir 3 éléments particuliers: text-align: center; position: relative; et display: inline-block;

cela devrait le centrer.

2
Brandon

La meilleure façon de résoudre ce problème j’ai cherché le code ou l’astuce permettant de centrer le menu de navigation et de trouver les vraies solutions qui fonctionnent pour tous les navigateurs et pour mes amis;)

Voici comment j'ai fait:

body {
    margin: 0;
    padding: 0;
}

div maincontainer {
    margin: 0 auto;
    width: ___px;
    text-align: center;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin-left: auto;
    margin-right: auto;
}

et n'oubliez pas de définir doctype html5

0
polas

Vous pouvez également utiliser float et inline-block pour centrer votre navigation comme suit:

nav li {
   float: left;
}
nav {
   display: inline-block;
}
0
camara

Votre navdiv est en fait correctement centré. Mais la ul à l'intérieur ne l'est pas. Donnez à la ul une largeur et un centre spécifiques.

0
AlbertVo