如何在div中垂直居中图像？ [英] How to vertically center a image in a div?

问题描述

我在div中有以下图片

I have the following image in a 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我试试。任何建议？

But for some reason I can't seem to vertically center the image no matter what CSS I try. Any suggestions?

推荐答案

没有一个令人惊讶的方法来完成这个，但下面应该做的伎俩。 p>

There isn't an amazing way to accomplish this, but what is below should do the trick.

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

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

Here is a simple fiddle. Keep in mind that I manually set the height for the #left-control element in this example since fiddle wasn't allowing for 100%.

这篇关于如何在div中垂直居中图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！