My vertical align of image doesnt work - html

Question

Im trying to vertically align three images inside a div. But somehow my vertical alignment doesn't work and I cannot undertand what I'm doing wrong.
My html:
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="./images/leftarrow.png" width="64px" />
</div>
<div id="imagediv">
<img src="./images/pages/part3/nutrition/Nutrition_Front-1.png" width="296px" />
</div>
<div class="arrowdiv">
<img src="./images/rightarrow.png" width="64px" />
</div>
</div>
</div>
And my css:
.maketable{
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell{
vertical-align: middle;
display: table-cell;
}
#imagediv{
display: inline-block;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
display: inline-block;
width: 64px;
margin: 3px;
}
The result is the following:
As you can see, I want to have the arrows vertically aligned in the middle of the center picture, but how ever I do it, i cannot get it to work. I've tried fiddling with float but that made it much worse. Can anyone spot what i'm doing wrong?

Answer 1

You need to apply display: inline-block (or table-cell) and vertical-align: middle to .makecell, #imagediv and .arrowdiv.
Fiddle
.maketable {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell, #imagediv, .arrowdiv {
vertical-align: middle;
display: inline-block;
}
#imagediv {
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
width: 64px;
margin: 3px;
}
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
<div id="imagediv">
<img src="http://www.dummyimage.com/296x420" width="296px" />
</div>
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
</div>
</div>

Answer 2

Just change the display: inline-block; to display: table-cell; and add vertical-align: middle; in your .arrowdiv and #imagediv CSS:
#imagediv{
display: table-cell;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.arrowdiv {
display: table-cell;
width: 64px;
margin: 3px;
vertical-align: middle;
}
Here is a DEMO Fiddle.