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

Question

Given this HTML: 鉴于此HTML：

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

How do I get the image to go in the center of the div? 我如何使图像进入div的中心？

At the moment it is located in the top left of the div. 目前，它位于div的左上方。

I tried 我试过了

img#image
{
    text-align:center;
}

But it made no difference. 但这没什么区别。

Answer 1

Try giving position relative to div: 尝试给出relative对于div的位置：

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

and this CSS for image: 以及此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

You need to set the text-align on the container like: 您需要像设置容器上的文本对齐：

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

div.image {
   text-align: center;
}

Answer 3

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

将图像居中放置在容器中

Answer 4

CSS: CSS：

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