My vertical align of image doesnt work

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

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.