CSS - HTML: centre Image in Div

Question

J'ai un img dans une div ( class="top_image" ) et je veux que cette image soit exactement au milieu de la div mais rien que j'essaye ne fonctionne ...

Merci pour toute aide!

Answer 1

Chaque solution posté ici suppose que vous connaissez les dimensions de votre img, ce qui n'est pas un scénario commun. Aussi, la plantation des dimensions dans la solution est douloureux.

Réglez simplement display: block de la img à l'intérieur de votre div, et également mis en margin-left: auto, margin-right: autoou margin: 0 auto. C'est tout.

Notez que vous aurez également à définir une première min-width pour votre extérieur div.

Answer 2

text-align: center ne fonctionnera que pour le centrage horizontal. Pour qu’il soit au centre complet, vertical et horizontal, vous pouvez effectuer les opérations suivantes:

 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];
}
 

Answer 3

Une solution très simple et élégante à ce est assurée par le W3C. Il suffit d’utiliser la déclaration de margin : 0 auto comme suit :

Plus d’informations et d' exemples de W3C.

Answer 4

<pre><code></code><p>CSS</p><pre><code></code></pre></pre>

Answer 5

Je pense que c’est mieux pour faire text-align center pour div et laisser les image à s’occuper de la hauteur. Juste spécifier un haut et bas pour div pour avoir d’espace entre l’image et div. coup d’oeil à cet exemple : http://jsfiddle.net/Tv9mG/