Bonjour à tous, cela fait une heure que je bute dessus et je ne trouve toujours pas de solutions pour centrer ma navigation dans le header. 

Si vous pouvez m'aider svp, j'suis super nulle! 

Voici le code html et css :

<!-- nav -->
			<nav class="nav" role="navigation">
				<ul>
					<li><a href="<?php echo home_url(); ?>" id="accueil">Accueil</a>
						<ul class="sub">
							<li><a href="bienvenue-a-la-maison-de-la-famille/qui-sommes-nous/">Qui sommes-nous?</a>
							</li>
							<li><a href="bienvenue-a-la-maison-de-la-famille/nos-financeurs/">Nos financeurs</a>
							</li>
						</ul>
					</li>
					<li><a href="espace-de-rencontres/" id="nous">Notre espace de rencontre</a>
						<ul class="sub">
							<li><a href="espace-de-rencontres/deroulement-des-visites/">Déroulement des visites</a>
							</li>
							<li><a href="espace-de-rencontres/accompagnement-des-enfants/">Accompagnement des enfants</a>
							</li>
							<li><a href="espace-de-rencontres/comment-aider-les-adolescents/">Comment aider les adolescents ?</a>
							</li>
							<li><a href="espace-de-rencontres/aide-a-la-parentalite/" id="parent">Aide à la parentalité</a>
							</li>
						</ul>
					</li>

					<li><a href="actualites/" id="accueil">Actualites</a>
					</li>
					<li><a href="informations/" id="nous">Infos pratiques</a>
						<ul class="sub">
							<li><a href="informations/plan-dacces/">Plan d'accès</a>
							</li>
							<li><a href="informations/partenaires/">Liens utiles</a>
							</li>
						</ul>
					</li>
					<li><a href="foire-aux-questions/" id="accueil">FAQ</a>
					</li>
					<li><a href="contact/" id="nous">Contact</a>
					</li>
				</ul>
			</nav>
			<!-- /nav -->

.nav>ul {
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 0;
}

.nav>ul>li {
	display: inline;
	position: relative;
	text-transform: uppercase;
	font-size: 14px;
	padding-right: 20px;
	padding-left: 20px;
	font-weight: 700;
	vertical-align: middle;
	color: #843635;
}

.nav>ul::after {
	content: "";
	display: inline;
	clear: both;
}

.nav li {
	list-style-type: none;
}

.nav a {
	color: #843635;
	-webkit-transition: color 250ms ease-out;
	-moz-transition: color 250ms ease-out;
	-o-transition: color 250ms ease-out;
	transition: color 250ms ease-out;
}

.nav li:hover .sub {
	display: inline;
	position: absolute;
	top: 100%;
	left: 0px;
	z-index: 10000;
}

.sub {
	display: none;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ffffff;
	width: 100%;
}

.sub li {
	padding-top: 10px;
}

.sub li a {
	padding-top: 10px;
	font-weight: 600;
	font-size: 14px;
}

.sub li a:hover {
	color: #92AAA5;
}

Merci d'avance ! 

Bonjour,

Il nous manque du code autour du nav pour savoir ce que tu as fais.

Mais essaie

header {
    display: flex;
}

nav {
    margin: auto;
}

Ou alors

nav {
    display: flex;
    justify-content: space-around;
}

J'ai l'impression que son nav est centré horizontalement mais pas verticalement... (On voit quedalle sur son image en vrai ahah)

header {
    display: flex;
}

nav {
    margin:auto; /* Alignement horizontal dans header */
    align-self:center; /* Alignement vertical dans header */
}

Dis nous si c'est ce que tu recherches !

Bonjour MPh06,

Je pense qu'un text-align devrait suffir

.nav{ text-align:center }

Ah ben peut-être qu'on l'a mal compris. Moi j'ai compris que l'auteur voulait centrer son nav dans le header... Peut-être qu'il veut centrer le texte dans le nav au final Et le text-align sera plus approprié en effet

BoOYa a écrit:

Bonjour,

Il nous manque du code autour du nav pour savoir ce que tu as fais.

Mais essaie

header {
    display: flex;
}

nav {
    margin: auto;
}

Ou alors

nav {
    display: flex;
    justify-content: space-around;
}

Alors dans mon header j'ai un logo au centre, qui est suivi de la navigation, malheureusement le display:flex ne fonctionnera pas !

Ekyss a écrit:

J'ai l'impression que son nav est centré horizontalement mais pas verticalement... (On voit quedalle sur son image en vrai ahah)

header {
    display: flex;
}

nav {
    margin:auto; /* Alignement horizontal dans header */
    align-self:center; /* Alignement vertical dans header */
}

Dis nous si c'est ce que tu recherches !

Alors j'ai enlevé les padding-right et left  dans nav>ul>li, voilà le résultat.. :( 

AliasDmc a écrit:

Bonjour MPh06,

Je pense qu'un text-align devrait suffir

.nav{ text-align:center }

Mon dieu !! Je ne pensais pas que c'était si simple bizarrement? Je n'avais rien mis dans .nav. Merci beaucoup!! J'arrive pas à croire que j'ai buté pour ça !