Discussion :

[laurentSc]

Bonjour,

Code html :

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

1
2
3
4
5
6
7
8
<div class="pleine-largeur"><span class="centertexte">il faut cliquer sur une image pour voir l'effet !</span>
<ul class="flex-container">
  <li class="flex-item"> <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.57-2.jpeg" alt="Image Gallery" width="100" class="image-galerie"/></li>
  <li class="flex-item"><img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.56-2.jpeg" alt="Image Gallery" width="100" class="image-galerie"/></li>
  <li class="flex-item"><img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.55.37.jpeg" alt="Image Gallery" width="100" class="image-galerie"/></li>
 
</ul>
</div>

Code css :

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

1
2
3
4
5
6
7
8
.centertexte{
	display:block;
	width:100%;
	margin:auto;}
 
.pleine-largeur{
	width:100%;
}

Pourquoi le texte de la ligne 1 n'est pas centré ?

[laurentSc]

Je viens de remarquer que avec

Code css :

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

1
2
3
4
5
6
7
8
.centertexte{
	display:block;
	width:1000px;
	margin:auto;}
*
.pleine-largeur{
	width:1000px;
}

c'était centré. Pourquoi une largeur de 100% ne fait pas toute la largeur de la page ?

[thelvin]

Hello,

mais justement, il fait toute la largeur disponible (ce qui peut être toute la page si les contenants eux-mêmes prennent toute la page.) Ça se vérifie facilement en affichant temporairement une petite bordure.

Seulement, avec margin: auto c'est la boîte qui est centrée. Pas le texte contenu dans cette boîte, qui est par défaut aligné à gauche. Et comme la boîte fait toute la largeur, qu'elle soit centrée ou non ne change rien. Par contre son contenu, aligné à gauche, est aussi à gauche qu'il est possible de l'être dans cette page.

L'alignement des textes à l'intérieur de leur boîte se fait avec text-align.

[laurentSc]

Salut,
ma nullité en CSS se confirme. Merci aussi pour l'idée du test avec une bordure.

Code css :

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

1
2
3
4
.centertexte{
	display:block;
	text-align:center;
	}