0

我已经阅读了所有 Google 最佳结果技巧，但我无法在 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>

任何意见？

4

3 回答 3

0

It depends what you want to center: a block element with explicit width, or an inline element:

http://jsfiddle.net/VNuFH/

Center a block image:

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

Center an inline image:

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

If you would want to center a shrink-wrapped div (for example image with caption), you could use the center float trick with one element:

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

于 2012-06-22T10:51:59.317 回答
0

这样做会奏效，

 <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>

这里发生的是图像左上角通过使用 top:50%, left:50% 定位在 p 的中间，但随后使用负边距偏移图像以到达中间。这个技巧适用于所有浏览器。

于 2012-06-22T13:08:49.503 回答
0

嘿，现在你可以像这样使用显示表格单元格属性

现场演示 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/

于 2012-06-22T11:13:47.903 回答