[Résolu] Centrage d'élément p

Bonsoir,

J'essaye de centrer le contenu d'un élément p. En gros : j'ai des box (.item_service) de 200px x 200px, que j'aligne via un float. A l'intérieur, j'ai une image et quelques mots explicatifs. J'aimerais centrer cette image et ces mots dans mon carré de 200px, mais pas moyen.

Voici mon XHTML :

<div id="glob_service">
	<div class="item_service">
		<p>
			<a href="#"><img src="images/services/depannage.png" alt="Nom service" />
			<br />Dépannage informatique</a>
		</p>
	</div>

	<div class="item_service">
		<p>
			<a href="#" style="text-align: center;"><img src="images/services/materiel.png" alt="Nom service" />
			<br />Dépannage informatique</a>
		</p>
	</div>
</div>

Et mon CSS :

.item_service {
	margin: 10px 5px 10px 5px;
	width: 200px;
	height: 200px;
	float: left;
	border: 1px solid black;
	display: block;
	text-align: center;
}

.item_service p a { text-align: center; }

#glob_service {
	margin: 0 auto;
	width: 100%;
	padding-left: 72px;
	text-align: center;
}

J'ai essayé les text-align, pas moyen de centrer le contenu de mon p au sein du carré... J'ai même lu le tuto sur Alsa, mais je comprends pas pourquoi ça ne marche pas...

Une idée ?

Bonne soirée !
Modifié par Jeoffrey54 (24 Nov 2010 - 17:24)

Bonjour,

Tu vas devoir center ton bloc <p>, en lui donnant des marges automatique à gauche et à droite.

Et, cette ligne est inutile, a étant un élément en ligne;

.item_service p a

Bonjour,

Cette fois j'ai mis :

.item_service { 
    margin: 10px 5px 10px 5px; 
    width: 200px; 
    height: 200px; 
    float: left; 
    border: 1px solid black; 
    display: block; 
    text-align: center; 
} 
 
.item_service p { margin: auto; } 
 
#glob_service { 
    margin: 0 auto; 
    width: 100%; 
    padding-left: 72px; 
    text-align: center; 
}

Cela n'a rien changé :S.

Évidemment puisqu'un élément bloc (comme <p>) prend toute la largeur de son parent, il aurait donc fallut lui donner une largeur.

Mais là, c'est au final une question de logique, et d'alignement.

Mais, essaye comme ça:

.item_service { 
    margin: 10px 5px; 
    width: 200px; 
    height: 200px; 
    float: left; 
    border: 1px solid black; 
    display: block;
} 
 
.item_service p {
    text-align: center;
} 
 
#glob_service { 
    margin: 0 auto; 
    width: 100%; 
    padding-left: 72px;
}

De mon côté ça fonctionne, mais ton ancien code aussi fonctionnait; alors tu es sûr que tes images ne sont pas plus grandes que 200px par 200px ?

Je comprends ton explication Vaxilart, et elle me paraît logique... L'ennui, c'est que même avec ton code, ça ne fonctionne pas...

Voici une url de démo : http://jeoffrey54.alwaysdata.net/test_alsa/services.php

Le CSS concernant les cadres 'services' est à la fin du fichier .

Sur le premier cadre, j'ai mis volontairement une petite image, mais rien n'y fait...

Merci d'avance .

Bonjour,

Je n'ai pas le temps pour les explications, mais ceci fonctionne :

#contenu_milieu .item_service p { 
    text-align: center; 
}  

Sans doute une histoire de priorité des sélecteurs, car tu déclares plus haut ceci :

#contenu_milieu p { 
    text-align: justify; 
}

Modifié par Tony Monast (24 Nov 2010 - 17:15)

Bonsoir Tony,

Effectivement, ça marche .

Je n'avais pas du tout pensé à la priorité des sélecteurs, je pensais que vu que c'était redéfini au niveau du "p" ça irait....

Merci à vous 2 pour vos explications !

Bonne soirée !