Centrer un élément d'un menu

Version imprimable

Bonjour,

j'ai un menu sur ma page HTML dans lequel j'ai mis un compteur: 00:00. Je voudrai le centrer. Pourriez-vous m'indiquer le code CSS à appliquer, svp?

Merci d'avance,

Cordialement

Arsène

https://jsfiddle.net/6hu82hy5/
Code:

1 2 3 4 5 6 <div id="monMenu" > <ul id="navigation"> <li ><a href="#" title="ma 1ère Section" id="maSection1" >‹‹ Connexion</a></li> <li ><a href="Compteur"><span id="minu">00</span>:<span id="secon">00</span></a></li> </ul> </div>

03/09/2016, 09h25
NoSmoking

Bonjour,
qu'est ce que tu veux center, le menu ou le compteur ?

En tout état de cause pour centrer un élément horizontalement il faut que celui-ci possède à minima une largeur et lui appliquer une margin-left/right:auto ce qui le centrera par rapport à son parent.
03/09/2016, 10h32
Arsene12
Bonjour,
je veux centrer le compteur uniquement, donc le 2ème élément de la liste.
je voudrais quelque chose du genre :
Code:

1 2 3 li 2ème élément { text-align: center; }
https://jsfiddle.net/6hu82hy5/1/
03/09/2016, 14h31
NoSmoking
Plusieurs façon d'y arriver
Code:

1 2 3 #navigation li +li{ text-align:center; }
sinon tu peux utiliser la pseudo-classe :nth-child(an+b).
Code:

1 2 3 #navigation li:nth-child(2){ text-align:center; }
03/09/2016, 16h02
Arsene12
Code:

1 2 3 #navigation li:nth-child(2){ text-align:center; }
j'ai rajouté ce code mais ça marche pas.

https://jsfiddle.net/6hu82hy5/2/
03/09/2016, 16h24
Arsene12

En cliquanr sur le bouton ça devrait marché mais le centrage est mauvais, il est décalé vers la droite :

https://jsfiddle.net/6hu82hy5/3/
03/09/2016, 16h35
Arsene12

j'ai rajouté position:absolute et ça marche :

https://jsfiddle.net/6hu82hy5/4/

Je crois que je viens enfin de comprendre ce que tu cherches à faire, centrer le compteur dans la partie restante du <ul>, le <li> de droite.

Si j'ai bien compris, il te faut faire un truc dans le style (à partir de ton dernier jsfiddle)
Code:

1 2 3 4 5 6 7 8 9 10 <div id="monMenu" > <ul id="navigation"> <li style="background:green"> <a href="#" title="ma 1ère Section" id="maSection1" >‹‹ Connexion</a> </li> <li style="float:none;background:red;" id="compteur"> <span id="minu">00</span>:<span id="secon">00</span> </li> </ul> </div>
je te conseille de mettre une couleur de fond sur tes différents éléments afin de te rendre compte de l'espace qu'ils occupent.

Les éléments flottants n'occupent que la place nécessaire à l'affichage de leur contenu et ceci en absence d'indications contraires.

04/09/2016, 17h22
Arsene12
Merci beaucoup,

c'est le float:none; que je devais rajouter à mon code css :
Code:

1 2 3 4 5 #navigation li:nth-child(2){ float:none; margin-left:0px; text-align:center; }
https://jsfiddle.net/6hu82hy5/7/

mais le centrage n'est pas parfait. Il y a un décalage avec celui que j'obtiens avec le bouton.
Le bon est celui que renvoi le clic sur le bouton (il faut maintenant y cliquer 2 fois dessus).

Bonjour,

Non mais, vous êtes sérieux ??? :fou:
Du JavaScript pour ça ??? :cfou:

Vous faites un concours d'usine à gaz, ou quoi ?

Code:

1
2
3
4
5
6
    <nav id="monMenu" > 
       <ul id="navigation">
            <li ><a href="#" title="ma 1ère Section" id="maSection1" >‹‹ Connexion</a></li>
            <li ><a href="Compteur"><span id="minu">00</span>:<span id="secon">00</span></a></li> 
        </ul>
    </nav>

D'abord (et vu que tu n'as pas précisé), s'il s'agit de centrer par rapport à la largeur RESTANTE du menu (après "Connexion") :

1/ Solution 1 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#monMenu {     
	position: fixed;
	background:green; 
	width: 100%;
	font-size: 18px;
}
#monMenu ul {     
	display:table;
	width: 100%;
}
 
#monMenu li {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	list-style:none inside none;
}
#monMenu li:nth-child(2) {
	width:100%; /* on prend la place restante */
}
#monMenu li a {
	color : white;
}

2/ solution 2 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#monMenu {     
	position: fixed;
	background:green; 
	font-size: 18px;
	width: 100%;
}
#monMenu ul {
	display:flex;
	width: 100%;
}
 
#monMenu li {
	text-align:center;
	vertical-align:middle;
  white-space:nowrap;
  list-style:none inside none;
}
	#monMenu li:nth-child(2) {
	flex:1 1 auto; /* on prend la place restante */
}
#monMenu li a {
	color : white;
}

Maintenant, s'il s'agit de centrer par rapport à la largeur COMPLETE du menu :
on passe le premier li en position absolute, et le tour est joué :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 * { margin:0; padding:0; border:0; } #monMenu { position: fixed; background:green; width: 100%; font-size: 18px; } #monMenu li { text-align:center; vertical-align:middle; white-space:nowrap; list-style:none inside none; } #monMenu li:nth-child(1) { position:absolute; /* on le sort du flux */ } #monMenu li a { color : white; }
N.B. Pour enlever les margin et padding "par défaut" :

Code:

* { margin:0; padding:0; border:0; }

05/09/2016, 07h30
Arsene12

Merci beaucoup,

j'ai fait un copié-collé du code CSS et ça marche impeccable. :)

Je clique de suite sur Résolu.

https://jsfiddle.net/8co8uq90/