如何将图像放在中间较小的div中?

时间:2011-12-26 20:52:28

标签: html css css3

  

可能重复:
  Aligning image to center inside a smaller div

我有一个问题,指向CSS 3.请参阅我的HTML代码部分:

<div id="main" style="width: 320px; height: 400px;">
   <img src="test.jpg" height="400" />
</div>

我不知道test.jpg文件的实际大小(宽度可能不同 - 文件是动态的)。我想让图像在id =“main”的中间(我不在乎,图像的左右部分将超出范围 - 它甚至更好)。我怎么能这样做?

2 个答案:

答案 0 :(得分:3)

只要您指定任何width,就可以通过添加margin:auto;来居中。这不是CSS3。

<img src="test.jpg" style="margin:auto; width:200px;display:block" />

答案 1 :(得分:1)

这将完成工作

<div id="main" style="width: 320px; height: 400px;background-position:center;background-repeat:no-repeat;background-image:url('test.jpg')">

</div>