Question

我在div中有以下图像

  <div id="left-control">
      <img src="img/icons/ic_next_3x_re.png" />
   </div>

这是css

#left-control {
   height: 100%;
   float: left;
}

#left-control > img {
    display: block;
    margin: 250px 0;
    z-index: 1;
}

但由于某种原因，无论我尝试什么CSS，我都无法将图像垂直居中。有什么建议吗？

Answer 1

没有一种令人惊奇的方法可以实现这一目标，但下面的内容应该可以解决这个问题。

#left-control {
   float: left;
   height: 100%;
}

#left-control:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#left-control img {
    vertical-align: middle;
    z-index: 1;
}

这是simple fiddle。请记住，我在此示例中手动设置#left-control元素的高度，因为小提琴不允许100％。

Answer 2

您可以使用CSS表来完成此任务。

.wrapper {
   display: table;
  height: 300px;
  border: 1px solid black;
}
#left-control {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#left-control > .img {
  display: inline-block;
  width: 100px;
  height: 100px;
  z-index: 1;
  background: red;
}

<div class="wrapper">
  <div id="left-control">
    <div class="img"></div>
  </div>
</div>

Answer 3

你可以将img包装在另一个div中，如此...

<div id="left-control">
      <div class="vert-align">
         <img src="img/icons/ic_next_3x_re.png" />
      </div>
   </div>

然后，在CSS中做这样的事情......

#left-control {
   height: 100%;
   position:relative;
}

#left-control > img {
    display: block;
    margin: 250px 0;
    z-index: 1;
}

.vert-align{
    position: absolute:
    margin: auto:
    top:0; left:0; right:0; bottom:0;
    height: 100px;
}

您可以使用左上角和右下角属性将其设置为所需位置。

如何在div中垂直居中图像？

3 个答案: