28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Voilà mon problème :
Je suis en train de faire la mise en page de mon site, et dans l'affichage des commentaires au news, je n'arrive pas à centrer l'avatar de l'auteur.

Voici le XHTML :

<div class="comment_author">
	<a href="show-profile.php?id=2" title="Martin">Martin</a><br />
	<img src="uploads/avatars/2.gif" width="100" height="100" class="comment_author_image" />
</div>
<div class="comment_text">
	<h1 class="comment_title">Titre</h1>
	<p>Bla bla bla bla bla</p>
</div>
<div class="comment_info">
	Posté le 18/05/2008 à 20:13
</div>


Et voici la CSS :

.comment_title {
	color: #7479E;
	font-size: 15px;
}

.comment_author {
	float: left;
	text-align: center;
	width: 25%;
}

.comment_author_image {
	text-align: center;
}

.comment_text {
	width: 75%;
	float: right;
}

.comment_info {
	clear: both;
	width: 98%;
	text-align: right;
}


Or, finalement, dans le div "comment_author", le nom de l'auteur est centré, mais l'image qui se trouve juste en dessous reste alignée à gauche...

Oui, j'ai lu la FAQ, et toutes les solutions que j'ai pu trouver, et je les ai appliquées sans résultat.

Merci pour votre aide.
Bonjour et bienvenue sur Alsacréations,

Ne pas attribuer de class particulière (pour centrer une image). img est un élément de type en ligne, si son conteneur est centré via la propriété text-align a la valeur center, alors l'image sera centrée:


<div style="text-align:center;">
<a href="show-profile.php?id=2" title="Martin">Martin</a><br />
<img src="uploads/avatars/2.gif" width="100" height="100" alt="" />
</div>