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

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; 并在.arrowdiv 和#imagediv CSS 中添加vertical-align: middle;：

#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。