web-dev-qa-db-fra.com

Centrer l'image horizontalement

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

Merci pour toute aide!

htmlcss
201
joschua011

Chaque solution publiée ici suppose que vous connaissiez les dimensions de votre img, , ce qui n'est pas un scénario courant. Aussi, planter les dimensions dans la solution est douloureux.

Simplement définir:

/* 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 devez également définir une valeur initiale min-width pour votre div extérieur.

508
Dyin

text-align: center ne fonctionnera que pour le centrage horizontal. Pour qu’il soit au centre, 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];
}
26
Maxime Fabre

Le W3C fournit une solution très simple et élégante à cela. Utilisez simplement la déclaration automatique margin: 0 comme suit:

.top_image img { margin:0 auto; }

Plus d'informations et exemples du W3C.

9
Phil Thomas
<div class="outer">
    <div class="inner">
        <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
    </div>
</div>

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

Je pense qu'il est préférable de centrer l'alignement du texte pour div et de laisser l'image prendre en charge la hauteur. Il suffit de spécifier un remplissage inférieur et supérieur pour que div ait un espace entre image et div. Regardez cet exemple: http://jsfiddle.net/Tv9mG/

7
Jay

J'espère que cela serait utile:

.top_image img{
display: block;
margin: 0 auto;
}
4
Arasu Pandiyan