Centrer une image horizontalement sur un div

WRInaute impliqué
Bonjour j'ai ce code :
Code:
<div style="border: 1px solid #ccc; text-align:center; width:100px; height:100px;">
<img src="lien" />
</div>
[code]

la petite image se centre sur le div horizontalement, et je cherche aussi à centrer mon image verticalement ! comment faire ça svp :)

Merci ;)
 
WRInaute accro
Comme le div a une hauteur et une largeur prédéfinie, et si c'est le cas aussi pour l'image, tu peux jouer avec du padding sur le div ou du margin sur l'image.
 
WRInaute accro
je n'avais pas fait attention au fait que largeur et hauteur du div étaient fixes.
Mais bon, pour gérer avec les margin/padding, il faut que les dimensions de l'image soient fixes et, en plus, tous les navigateurs ne gèrent pas de la même façon les box
 
WRInaute impliqué
Merci pour vos réponses ;)
J'ai essayé ça
Code:
<div style="border: 1px solid #ccc; text-align:center; width:100px; height:100px;display: table-cell;">
<img src="lien" style="max-height: 117px; max-width:117px; vertical-align:middle"/>
</div>
Et ça ne marche toujours pas car sachant que l'image à la taille 117*50px
 
WRInaute accro
Bonjour

<div style="text-align:center; width:x%; margin-left:auto; margin-right: auto;">

<img style="width: 100%" src="...etc..." />

</div>


Mes deux cents.

Comme la largeur de l'image, est déterminée par celle du div l'englobant ( 100% du div ), il suffit de régler le width en pourcentages du div, pour fixer la largeur relative de l'image par rapport au container du div, et le div sera centré par rapport à son container.

C'est la méthode que j'ai utilisé pour mon site.

Bien amicalement.

Jean François Ortolo
 
WRInaute accro
Leonick a dit:
oui, mais, en fait, sa question est pour centrer verticalement, le titre du message est erroné


Bonsoir Leonick

Je crois que je me fais vieux... ;(

Décidément, je suis à la fois bigleux, et je manque d'attention. ;)

Que penses-tu de mon nouvau logo de mon site ?

Bien amicalement.

Jean François Ortolo
 
WRInaute impliqué
Je viens de penser à une autre solution.
Les images ont l'avantage de pouvoir s'aligner verticalement sur la ligne de base du texte. L'idée, c'est de préciser une hauteur de ligne égale à la hauteur de ton DIV. Ensuite, on aligne au milieu l'image :
Code:
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="border: 1px solid #ccc; text-align:center; width:200px; height:200px; line-height: 200px;">
            <img src="http://nsa30.casimages.com/img/2012/07/15/mini_120715023536646953.png" alt=""
                style="vertical-align: middle; border: 1px solid #000;" />
        </div>
    </body>
</html>
(j'ai modifié, pour l'exemple, la taille du DIV, à adapter à tes besoins).
Je n'ai aucune idée sur la compatibilité des navigateurs. En tout cas, sous Firefox 15, ça fonctionnement très bien.
 
WRInaute discret
Bonjour.

Si tu connais la taille de ton image, tu peux essayer ça qui passe partout, même IE6 c'est dire :)

@++

Code:
<html>
	<head>
		<style>
			.box {
				border: 1px solid #ccc;
				width:500px;
				height:500px
				/*Pas de text-align: center*/
			}
			.centrage {
				position: relative;
				top:50%;
				left:50%;
				margin-top:-55px;	/*hauteur de l'image divisée par 2*/
				margin-left:-208px	/*largeur de l'image divisée par 2*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="https://www.webrankinfo.com/images/wri/webrankinfo-logo.png" width="415" height="110" class="centrage" />
		</div>
	</body>
</html>
 
Discussions similaires
Haut