中心图像垂直html

时间:2013-04-07 11:41:57

标签: html css image

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

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

1 个答案:

答案 0 :(得分:1)

为其父display: table;和图片display: table-cell;以及vertical-align: middle;提供:

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

顺便说一下,有很多网站,甚至是关于SO的问题,描述了这个问题。 (Proof

编辑:

根据this,您可以省略display:规则。