html - 垂直居中图像html

Question

<div class="store_module" id="@store.ID" style="
    margin-left: 0px;
    overflow: hidden;
    display: block;
    background-color: #343233;
    cursor: pointer
  ">
<div class="store_image" style="
    float: left;
    overflow: hidden;
    width: 100px
">
<img src="@store.ImageLogo" style="
  display: block; 
  margin: auto;
"/>
</div>
</div>

为什么我不能垂直居中徽标图片？这一定很容易，但我真的找不到答案。

Answer 1

给它的父级display: table;和图像display: table-cell;和vertical-align: middle;：

.store_image {
    display: table;
}
.store_image img {
    display: table-cell;
    vertical-align: middle;
}

顺便说一句，有很多网站，甚至关于 SO 的问题，都描述了这个问题。（证明）

编辑：

据此，您可以省略display:规则。