28211 sujets

CSS et mise en forme, CSS3

Positionner image en bas d'un div avec texte centré

Je suis désolé, c'est une question toute bête, mais pourtant je bloque Smiley sweatdrop .

J'ai un div que j'ai positionné avec l'attribut position: relative; afin de pouvoir positionner une image par la suite. Dans ce même div, j'ai appliqué un text-align: center; afin de center mes éléments.
Ensuite, je mets le nom et prénom en haut du cadre (centré bien sûr), et je veux mettre la photo centrée en bas du cadre. Pour celà je fais :


#resultat .photo
{
	position: absolute;
	bottom: 0;
}


Cependant ça me centre le côté gauche de la photo. Si je rajoute left: 0;, margin-left: auto; et margin-right: auto;, ça me laisse la photo à gauche.
Comment faire?

Merci Smiley confused
bonjour,

le comportement que tu décris est normal, en étant positionné en absolute un élément perd ses propriétés de marge.

Par rapport à ce que tu sembles chercher, une solution simple serait :

<div>
<p>Nom Prénom</p>
<img src="" alt="" width="" height="" />
</div>


et css :

div {
text-align:center;
}
Bonsoir,
Tu dois appliquer a ton img une marge gauche négative de la moitié de sa largeur.
C'est le même principe que le centrage avec left:50% et marge negative

Ton postionnement absolue ne spécifiant pas de potitionnement latéral
(left et right valent donc auto), le coté gauche de ton image se place donc à l'endroit ou elle se trouverait s'il était dans le flux,
c-a-d au centre : le point de départ de ton image n'etant pas son centre horizontale.
Modifié par Hermann (10 Jan 2006 - 22:09)
Modérateur
bonjour,
ce code semble fonctionner
div {position:relative;text-align:center;height:100px;}
div img {position:absolute;bottom:0;}

avec ce html:
<div>
<p>Nom Prénom</p>
<img src="#" alt="image" width="" height="" />
</div>

mais pas si l'image est en ... display:block;
aurait tu par hasard une autre regle css qui applique cette valeur a toutes les images de ta page ?
bonne chance
a écrit :
mais pas si l'image est en ... display:block;


Il faut savoir qu'un élément positionné de manière absolu (comme le float) fait passer obligatoirement sa valeur de display à block.
Ben pour l'appliquer a tte les img il suffit de declarer
img {position:absolute;bottom:0;}
Modérateur
test le code avec un display block, et bizarrement l'image reste a gauche, (en tout cas sous firefoxe, pas sous IE), je n'en dis pas plus .... Smiley cligne .
<edit>comme ça:
div {position:relative;text-align:center;height:150px;}
div img {position:absolute;bottom:0;display:block;}

</edit>
Dire qu'un elements passer en absolute ou flottant devient obligatoirement en "block" n'est pas forcement vrai a 100% , du moins pour les comportements generalement attendus d'un element block, il faut imperativement donner une tailles aux balises (vides, alors que dans un flux normale elles occupent 100% de la largeur de l'espace ) pour les voir ....
Il s'agit encore plus de l'interpretation des navigateurs que des regles css elle même, IE est le top pour les appliquer a sa sauce ...

D'ailleurs en surchargeant ce code avec un display:inline; pour l'image, IE ou Firefoxe se comporte de la même façon ,ça change rien a l'affichage (en xhtml 1.0 et 4.01 )....
Il y a les regles et leurs diverses interpretations (humaine et logiciel), Smiley decu , il faut faire avec !

a plus
Modifié par gcyrillus (12 Jan 2006 - 17:23)
a écrit :
Il y a les regles et leurs diverses interpretations (humaine et logiciel), decu , il faut faire avec !


Oui et d'ailleurs on devrait toujours dire pour commencer "En théorie"
Car le nombre d'incohérences et de mauvaises surprises est énorme!
Malheureusement, même si les chose se peuvent que s'améliorer à ce niveau, on passe souvent plus de temps à régler ces maudits problèmes qu'à la construction d'une page.
Mais je crois qu'on peut s'autoriiser quelques imperfections dans l'interoperabilité.

Bye
Modifié par Hermann (12 Jan 2006 - 18:17)
Sujet clos
Aller à