Discussion :

[isaric]

Comment aligner 2 <li> pour les afficher au centre, l'un à côté de l'autre .

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
  <li>
texte1+image...
  </li>
  <li>
texte2+image...
  </li>
</ul>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ul {
	text-align: center;
	/* display: inline-block; */ /* à gauche + "compression"  */	
	/* display: inline; */ /* à gauche + sans "compression"  */
	/*overflow: hidden; */  /* centre + à la ligne */
	/* align-items: stretch; */ /* centre + à la ligne */
	 align-items: first;  /* centre + à la ligne +"compression" */	
 
	/* display: inline-table; */
	/* width: 100% */
	list-style-type: none;
	vertical-align : top;
	margin: 0 20px 0 20px;
}
 
li { 	
  	display: inline-block;
  	list-style: none;
  	text-align: center;
  	list-style-type: none;
  	vertical-align : middle;
  	border-width: 0 0 5px 0;
	padding: 0 0 0 0;
}

D'avance merci.

[NoSmoking]

Bonjour,
ta notion de centrage est assez flou, centrage horizontal dans la page, centrage des textes et images dans les éléments <li> ?

A défaut as-tu essayé de mettre ton élément <ul> en display:flex dans un premier temps ?

[isaric]

Merci NoSmoking

Je cherche à centrer horizontalement les 2 <li> dans <ul></ul>
(sauf si la largeur de la fenêtre du navigateur n'est pas en pleine écran, les 2 <li> passent l'un au dessous de l'autre sur 2 lignes).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
  <li>
texte1+image...
  </li>
  <li>
texte2+image...
  </li>
</ul>

display:flex

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ul {
	text-align: center;
	display: flex; /* aligne H.à gauche  + "compression"  */
	/* display: inline-block; */ /* aligne H. à gauche + "compression"  */	
	/* display: inline; */ /* à gauche + sans "compression"  */
	overflow: hidden;  /* aligne H au centre + à la ligne */
	/* align-items: stretch; */ /* aligne H au centre + à la ligne */
	/* align-items: first; */  /* aligne H au centre + à la ligne +"compression" */	
 
	/* display: inline-table; */
	/* width: 100% */
	list-style-type: none;
	vertical-align : top;
	margin: 0 20px 0 20px;
}
 
li { 	
  	display: inline-block;
  	list-style: none;
  	text-align: center;
  	list-style-type: none;
  	vertical-align : middle;
  	border-width: 0 0 5px 0;
	/* padding: 5px; */
	padding: 0 0 0 0;
	/* min-width: 200px; */ 
}

Cela ne change rien avec :
display: flex; , cela aligne à gauche et ne centre pas les 2 <li> l'un à côté de l'autre lorsque je suis en plein écran pour le navigateur.

[NoSmoking]

Cela ne change rien avec :
display: flex; , cela aligne à gauche et ne centre pas les 2 <li> l'un à côté de l'autre lorsque je suis en plein écran pour le navigateur.

Il faut bien sûr appliquer un centrage au contenu plus une obligation de passage à la ligne, non prévu par défaut.

Avec flex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}
li {
  min-width: 20em;   /*-- il faut définir une largeur pour centrer du texte --*/
  text-align: center;
  list-style: none;
  background: #DEF;  /*-- juste pour visualiser --*/
}

tu pourrasi le faire avec un display:block sur l'élément <ul> mais il apparaitrait dans ce cas apparition de « white space » souvent indésirable.

Avec block, valeur par défaut des <ul> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
ul {
  padding: 0;
  text-align: center;
}
li {
  display: inline-block;
  min-width: 20em;
  text-align: center;
  list-style: none;
  background: #DEF;
}

[isaric]

En rajoutant à section
text-align: center;
ce la marche avec display: inline; dans ul

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<section>
...
<ul>
  <li>
texte1+image...
  </li>
  <li>
texte2+image...
  </li>
</ul>
...
</section>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
section  {
		...
		text-align: center;
	}
 
ul {
	text-align: center;	
	display: inline; 
	list-style-type: none;
	vertical-align : top;
	margin: 0 20px 0 20px;
}
 
li { 	
  	display: inline-block;
  	list-style: none;
  	text-align: center;
  	list-style-type: none;
  	vertical-align : middle;
  	border-width: 0 0 5px 0;
	padding: 0 0 0 0;
}