Question

我已阅读所有谷歌顶级成绩技巧，但我无法将图像置于div中。

例如，这个流行的技巧：http://webdesign.about.com/od/beginningcss/a/aa012207.htm或http://www.w3.org/Style/Examples/007/center.en.html 在IE 8中不起作用。
我从Stackoverflow尝试了另一个，但它在Opera中不起作用。

所以我认为在大多数浏览器（IE8，Firefox，Safari，Opera，Maxthon，K-Melon，SeaMonkey）中都有一个技巧：

<p style="text-align:center"><img  style="display: block;   margin-left: auto;   margin-right: auto;"   src="parliament.gif" width="200" height="71"></p>

有任何意见吗？

Answer 1

这取决于您想要居中的内容：具有显式宽度的块元素或内联元素：

http://jsfiddle.net/VNuFH/

居中阻止图像：

<div>
    <img style="display: block; margin: 0 auto;" src="...">
</div>

居中显示内嵌图片：

<div style="text-align: center;">
    <img src="...">
</div>

如果你想要一个收缩包装的div（例如带有标题的图像），你可以使用一个元素的中心浮动技巧：

http://pmob.co.uk/pob/centred-float.htm

Answer 2

嘿，现在你可以这样使用显示table-cell 属性，就像这样

现场演示 http://jsfiddle.net/22cHK/

<强> HTML

<div class="center">
<img src="http://testing.gobanana.co.uk/wp-content/uploads/2011/03/CrashTestDummy-2-8544b.jpg" >
</div>

<强>的CSS

.center{
text-align:center;
    border:solid 10px red;
    vertical-align: middle;
    display:table-cell;
    width:700px;
    height:700px;
}
.center img{

}

现场演示http://jsfiddle.net/22cHK/

Answer 3

这样做会起作用，

 <p style="text-align:center">
  <img  style="position:absolute;
  width:200px;
  height:70px;
  top:50%;
  left:50%;
  margin:-35px 0 0 -100px;
  visibility:visible;
  src="parliament.gif">
 </p>

这里发生的是图像左上角位于p的中间，使用top：50％，left：50％但是然后使用负边距偏移图像到达中间。这个技巧适用于所有浏览器。

如何在所有浏览器中将IMG置于DIV中心

3 个答案: