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 where the tall image sets the height of the parent.

Using flexbox but still requires defining height for parent:

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

    <img alt="No, he'll be an engineer." src="" />

Aucun commentaire:

Enregistrer un commentaire