Élément d'image central en parental div

Comment puis-je installer le centre de l'élément d'image au sein du parent? div? Je voudrais le faire 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 100% /Remarque: je ne veux pas étirer la largeur de l'image/.

Voir ici 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; }
Invité:

Alice

Confirmation de:

Ajouter une annonce
text-align: center;

CSS Aux parents
.box

Au lieu de filiale
.box img

.


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


Ici
http://jsfiddle.net/qolami/Ex5ax/10/
.

Mettre à jour

Il semble que, sous l'image, il y a aussi un espace
5px

, Il fait référence aux symboles de hauteur de chaîne réservés. Pour l'enlever des éléments intégrés, tels que
<img/>

, vous pouvez utiliser
vertical-align: bottom

:


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


http://jsfiddle.net/qolami/Ex5ax/25/

Constantine

Confirmation de:

Vous devrez vous déplacer
text-align: center;

de CSS Pour l'image B. CSS Pour son parent div, Donc le vôtre CSS comme suit:


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

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


Et tout est!

Babette

Confirmation de:

Essayez d'attribuer la propriété Image margin évaluer
margin:0 auto

, Si votre parent div a une largeur, de sorte que l'image sera centrée conformément au parent

Felix

Confirmation de:

Je l'ajouterais à .box img.


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


Vous aurez probablement besoin de les configurer à chaque image et peut-être pas à cause des tailles.

Pour répondre aux questions, connectez-vous ou registre