web-dev-qa-db-fra.com

Elément d'image central dans div parent

Comment puis-je définir le centre d'un élément d'image dans une division parent? Je voudrais faire cela pour que le milieu de l'image soit toujours au centre de son parent. De plus, je veux que l'image ait toujours une hauteur de 100% (note: je ne veux pas étirer la largeur de l'image).

Voir ici pour un exemple: http://jsfiddle.net/Ex5ax/5/

<div class="box">
  <img src='featured.jpg' />
</div>

CSS: 

.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }
htmlcssimage
10
Caspert

Ajoutez la déclaration CSS text-align: center; au parent .box au lieu du fils .box img.

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

Voici le Fiddle.

Mettre à jour

Il semble qu'il y ait aussi un espace 5px sous l'image. Il appartient aux caractères réservés de hauteur de ligne. Pour supprimer cela des éléments en ligne tels que <img>, vous pouvez utiliser vertical-align: bottom:

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo # 2

9
Hashem Qolami

Vous devrez déplacer le text-align: center; du CSS de l'image vers le CSS de son div parent afin que votre CSS ressemble à ceci:

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}

Et c'est tout!

3
Dhruv Kapoor

J'ajouterais ceci à .box img.

.box img { margin-left: -25%; margin-top: -25%; }

Vous auriez probablement besoin de les ajuster par image, ou peut-être pas en raison des dimensions.

0
Lewes

Essayez de donner la propriété de la marge de l'image sous la forme margin:0 auto, si votre div parent a la largeur afin que l'image soit centrée comme par parent 

0
Ichigo Kurosaki