J’ai un img
dans une div ( class="top_image"
) et je veux que cette image soit exactement au milieu du div mais rien que j’essaie ne fonctionne …
Merci pour toute aide!
Chaque solution affichée ici suppose que vous connaissez les dimensions de votre img
, ce qui n’est pas un scénario commun. En outre, planter les dimensions dans la solution est douloureux.
Définissez simplement:
/* for the img inside your div */ display: block; margin-left: auto; margin-right: auto;
ou
/* for the img inside your div */ display: block; margin: 0 auto;
C’est tout.
Notez que vous devrez également définir un min-width
initial pour votre div
externe.
text-align: le centre ne fonctionnera que pour le centrage horizontal. Pour qu’il soit au centre complet, vertical et horizontal, vous pouvez faire ce qui suit:
div { position: relative; } div img { position: absolute; top: 50%; left: 50%; margin-left: [-50% of your image's width]; margin-top: [-50% of your image's height]; }
Une solution très simple et élégante est fournie par le W3C. Utilisez simplement la marge: 0 auto-déclaration comme suit:
.top_image img { margin:0 auto; }
Plus d’informations et d’ exemples du W3C.
CSS
img { max-width: 100%; max-height: 100%; display: block; margin: auto auto; } .outer { border: 1px solid #888; width: 100px; height: 100px; } .inner { display:table-cell; height: 100px; width: 100px; vertical-align: middle; }
Je pense qu’il est préférable de faire un alignement de texte au centre pour div et de laisser l’image prendre soin de la hauteur. Il suffit de spécifier un remplissage supérieur et inférieur pour div afin d’avoir un espace entre l’image et le div. Regardez cet exemple: http://jsfiddle.net/Tv9mG/
J’espère que cela serait utile:
.top_image img{ display: block; margin: 0 auto; }
Cela m’a pris trop de temps pour comprendre. Je ne peux pas croire que personne n’a mentionné les balises centrales.
Ex:
et si vous souhaitez redimensionner l’image en pourcentage:
GG Amérique