lundi 20 avril 2015

Center Images inside Parent container

Want to center images both vertically and horizontally without explicitly setting a height on their parents. I would like the height of the tallest image to be the height of the parent and center all other sibling images.

The final results will look like http://ift.tt/1JooveY where the tall image sets the height of the parent.

Using flexbox but still requires defining height for parent: http://ift.tt/1O9jGNo.

div {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    border: 1px solid green;
    width: 100%;
    height: 80vw;
}

<div>
    <img alt="No, he'll be an engineer." src="http://ift.tt/TqWtKq" />
</div>

Aucun commentaire:

Enregistrer un commentaire