如何让我的图像进入div的中心？

Question

鉴于此HTML：

<div>
  <img id="image">
</div>

如何让图像进入div的中心？

目前它位于div的左上角。

我试过

img#image
{
    text-align:center;
}

但它没有任何区别。

Answer 1

尝试将位置relative提供给div：

#div_id{
  position:relative;
  width:400px;
  height:200px;
}

这个用于图片的CSS：

#img_id{
  position:absolute;
  top:100px; /* half of parent div's height */
  left:200px;  /* half of parent div's width */
  display:block;
}

Answer 2

您需要在容器上设置text-align，如：

<div class="image">
  <img />
</div>    

div.image {
   text-align: center;
}

更多信息： http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

Answer 3

<img style='display:block; margin:0 auto' src='...'>

将图像置于其容器中心

Answer 4

CSS：

div { text-align: center; }
#image { display: inline-block; vertical-align: middle; }