自動頁邊距不會使頁面中心居中圖像

在this example圖像不居中。爲什麼？我的瀏覽器是Windows 7上的Google Chrome v10，而不是IE。自動頁邊距不會使頁面中心居中圖像

<img src="/img/logo.png" style="margin:0px auto;"/>

來源

2011-04-20 Web_Designer

檢測出的樣式類，我發現，這是不工作**保證金：0汽車; **在一些測試發現，如果類名你正在添加到與元素具有相同名稱的元素，這將無法工作。 – LostLight 2015-03-13 18:22:19

178

add display:block;它會工作。圖像默認爲內聯

爲了說明，block元素的默認寬度爲auto，這當然會填充包含元素的整個可用寬度。

通過將邊距設置爲auto，瀏覽器將一半剩餘空間分配給margin-left，另一半分配給margin-right。

來源

2011-04-20 17:24:40 Ross

+11

+1正確。如果您詳細闡述了'margin：auto'在流程中居中所需的內容，會做出很好的回答。（'display：block'或'display：table'，'position：static'或'position：relative'等） – Phrogz 2011-04-20 17:26:14

噢，好的，謝謝！ – 2011-04-20 17:27:14

@Progro同意;補充說明一些。 – Ross 2011-04-20 17:33:08

在某些情況下（如早期版本的IE瀏覽器，蛤蚧，Webkit的）和繼承，與position:relative;元素將防止margin:0 auto;無法工作，即使top，right，bottom，並left未設置。

將元素設置爲position:static;（默認值）可能會在這些情況下解決該問題。通常，具有指定寬度的塊級元素將使用relative或static定位來尊重margin:0 auto;。

來源

2012-08-21 15:00:33 Brendan

'margin：0 auto'在相對定位的元素上工作得很好，只要它們是沒有浮點數和指定寬度的塊元素... – Ennui 2014-07-02 12:42:36

我認爲這是諷刺。如果你編輯你的答案，使其不準確，我會刪除downvote。我已經寫了近15年的CSS，並且永遠不會記得汽車邊距不能用於水平居中相對定位的固定寬度元素 - 儘管其他屬性如「float」和「display」可以改變這種行爲。 – Ennui 2014-07-02 18:36:36

在我的情況下，問題是我已經設置了最小和最大寬度沒有寬度本身。

來源

2013-01-31 17:36:44

to recap：元素必須是'position：static'，有一個固定的'width：'set並且是一個'display：block'元素 – 2013-06-26 01:18:46

這也是我的寬度問題 - bootstrap自動設置我的div使用100％可用 – 2015-03-03 13:55:30

每當我們不添加寬度，並添加margin:auto，我想這是行不通的。這是我的經驗。寬度給出了它需要提供相等邊際的準確位置。

來源

2013-03-28 22:08:35

存在於margin-left:auto; margin-right: auto;或margin:0 auto;爲使用position:absolute;這是怎樣的那些一個選擇：
您元素的左側位置設置爲50％（left:50%;），但不會爲了正確居中的元素要正確居中，你需要給它減一半它單曲寬度的保證金，那將圍繞你的元素完美

這裏有一個例子：http://jsfiddle.net/35ERq/3/

來源

2014-03-26 01:15:10 Andrei

可以自動居中寬格使用display:table;

div{ 
margin: 0px auto; 
float: none; 
display: table; 
}

來源

2016-02-04 09:29:01 sameeuor

對於引導按鈕：

display: table; 
margin: 0 auto;

來源

2017-03-17 18:42:14 Abram

自動頁邊距不會使頁面中心居中圖像

回答

相關問題