如何在所有瀏覽器的DIV中IMG中心

我已閱讀所有Google最常見的結果技巧，但我無法將圖像集中在div中。如何在所有瀏覽器的DIV中IMG中心

例如，這招人喜愛：http://webdesign.about.com/od/beginningcss/a/aa012207.htm或http://www.w3.org/Style/Examples/007/center.en.html 不工作在IE 8
我試圖從另一個但＃1它不能在Opera工作。

所以我覺得一個竅門是在大多數瀏覽器（IE8，火狐，Safari，歌劇，傲遊，K-甜瓜，SeaMonkey的）工作：

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

有何評論？

來源

2012-06-22 AgA

這取決於你想要什麼中心：有明確的寬度塊元素或內聯元素：

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

來源

2012-06-22 10:51:59 biziclop

現在我只想要一個div內的圖像 – AgA

文本左對齊，這是預期的。 jsfiddle示例中的圖像是否也是左對齊的？ – biziclop

對不起，我刪除了評論，但我是正確的 - 第一個片段沒有在IE中對齊它們，但它在jsfiddle中。 – AgA

嘿，現在你可以做到這一點使用顯示錶細胞屬性，這樣

現場演示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-22 11:13:47

但div在左邊對齊，而圖像確實在中心 – AgA

你想中心包含'img'的'div'嗎？你能澄清你到底想要集中什麼嗎？ – biziclop

嘿@AgA你想要這個http：// jsfiddle。net/22cHK/2/ –

爲此，它會工作，

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

這裏發生的是左上角被定位在圖像通過使用頂部：50％，左：50％，但使用負邊距抵消圖像到中間。這個技巧適用於所有瀏覽器。

來源

2012-06-22 13:08:49

如何在所有瀏覽器的DIV中IMG中心

回答

相關問題