Wie wird das Bild vertikal ausgerichtet?

Question

Ich versuche, ein Bild in einem Div vertikal auszurichten, aber alles, was ich versuche, wird nicht funktionieren.

Ich versuche, es in einer material design lite Zelle zu zentrieren.

Hier ist mein Code:

CodePen

HTML:

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--4-col"> 
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> 
    </div> 
    <div class="mdl-cell mdl-cell--4-col"> 
    <div class="imgholder"> 
    <img src="http://i.stack.imgur.com/kq8EX.png" id="stackimg"> 
    </div> 
    </div> 
</div> 

CSS:

.mdl-cell{ 
    border: 1px solid black; 
} 
.imgholder{ 
    width: 100%; 
    height:100%; 
} 
#stackimg{ 
    width:50%; 
    float: right; 
    position: reletive; 
    top:50%; 
    vertical-align: middle; 
} 

Vertical-align: middle macht nichts. Weder ist top: 50%. Das Bild hat ein Eltern-Div mit einer definierten Höhe, also bin ich mir nicht sicher, warum es nicht funktioniert.

Jede Hilfe wird geschätzt.

Answer 1

Sie können vertikal Ihre Bildmitte durch translateY() verwenden. Geben Sie Ihrem Container eine position: relative; und weisen Sie dann Ihrem Bild position: absolute; zusammen mit transform: translateY(-50%); zu.

CSS

.imgholder{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

#stackimg{ 
    width: 50%; 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 

CodePen

Answer 2

Vertikal ausrichten Ihre div Bild enthält, anstatt das img-Tag selbst oder Check this:

> `http://jsfiddle.net/kizu/4RPFa/4570/`