我的垂直对齐图像不起作用

Question

我试图在div内垂直对齐三个图像。但不知怎的，我的垂直对齐并不起作用，我无法承担我做错的事情。

我的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>

我的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;
}

结果如下：

正如你所看到的，我希望箭头在中心图片的中间垂直对齐，但是我怎么做，我无法让它工作。我试图摆弄浮动，但这让事情变得更糟。谁能发现我做错了什么？

Answer 1

您需要将display: inline-block（或table-cell）和vertical-align: middle应用于.makecell，#imagediv和.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

只需将display: inline-block;更改为display: table-cell;，然后在vertical-align: middle;和.arrowdiv CSS中添加#imagediv：

#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;
}

这是DEMO Fiddle。