I'm struggling to vertically align an image within a div, no matter what I try it just won't cooperate.
The goal is to center it within a material design lite cell.
Take a look at my code:
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>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="imgholder">
<img src="https://i.sstatic.net/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 seems ineffective. Nor does top: 50%. The image's parent div has a defined height, so the reason behind this issue remains unknown.
Your suggestions and assistance are most welcome!