Wie wird das Bild vertikal mit Flex ausgerichtet?

Question

Ich weiß, es wurde beantwortet, aber keine der Antworten funktioniert für mich.

HTML:

<div class="sm-col md-col-8 col-12"> 
    <div class="horizontal-flex"> 
    <div class="vertical-flex"> 
     <img class="inline gallery-image-max" src="<%= picture.dir %><%= picture.filename %>"> 
    </div> 
    </div> 
</div> 

CSS:

.vertical-flex { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.horizontal-flex { 
    display: flex; 
    justify-content: center; 
} 

Irgendwelche Lösungen?

Answer 1

Verwendung align-items:center

.vertical-flex { 
 
    display: flex; 
 
    align-items: center; /*vertical align*/ 
 
    justify-content: center; /*horizontal align*/ 
 
    border: 1px solid red; 
 
    height: 500px; 
 
}

<div class="vertical-flex"> 
 
    <img class="inline gallery-image-max" src="http://lorempixel.com/100/100"> 
 
</div>

Answer 2

Just added Höhe class = Horizontal-flex. Es funktionierte wie ein Charme :) Es brauchte Höhe.