使用margin auto的中心不起作用

我在頁面中使用了一個jQuery動畫，它添加了一些CSS屬性，我不明白爲什麼margin: auto不起作用。使用margin auto的中心不起作用

的HTML代碼（通過加入jQuery的樣式屬性）：

<body style="overflow: hidden;"> 
    <div id="tuto_wamp" style="width: 7680px; height: 923px; "> 
     <!-- Step 1 --> 
     <div style="height: 549px; width: 1280px; margin-top: 0px; margin-left: 0px; position: absolute; overflow-y: hidden; overflow-x: hidden; "> 
      <div class="content_tuto"> 
       <img src="images/install1.png" alt=""> 
      </div> 
     </div> 
    </div> 
</body>

我的CSS代碼：

#tuto_wamp 
{ 
    background: #3a393c; 
    width: 100%; 
} 

.content_tuto 
{ 
    width: 100%; 
    margin: auto; 
    display: block; 
}

我不知道哪個屬性塊margin: auto居中圖像。

謝謝。

來源

2012-05-16 Guillaume

您正在測試哪個瀏覽器？ –

Chrome Firefox和Opera – Guillaume

寬度：100％，margin：auto;我不清楚你的問題，請http://jsfiddle.net – ShibinRagh

添加text-align:center;到.content_tuto而且將集中

注意，你必須寬度style="width: 7680px; ...和style=".. width: 1280px; ...，所以當您居中你正在爲這個寬度居中。

來源

2012-05-16 15:30:42

是的，工作！但爲什麼保證金：汽車;不起作用 – Guillaume

因爲你希望邊緣在顯示塊而不是div的圖像上，請查看http://jsfiddle.net/xVNbQ/1/ –

它不會工作，因爲你已經設置的.content_tuto寬度100%;

來源

2012-05-16 15:20:52 xandercoded

哪一個？在tuto_wamp或.content_tuto中？ – Guillaume

你怎麼能在每邊沒有保證金的東西上「每邊都有相同數量的保證金」？如果你的寬度是100％，那麼你可以填滿所有的空間，因此兩邊的邊距都是0.你不能以100％寬的方格爲中心。 – stommepoes

我創建了一個小提琴，並添加邊框以可視化解決

http://jsfiddle.net/meetravi/Y42Pf/

你也可以有中心的一個良好的閱讀中的CSS股利從這裏

http://stever.ca/web-design/centering-a-div-in-ie8-using-marginauto/

希望能幫助到你。

來源

2012-05-16 15:41:31 Ravi

我知道這是一箇舊帖子，但想分享我如何解決同樣的問題。

我的圖像繼承了父類的float:left。通過設置float:none我能夠使margin:0 auto正常工作。希望它可以幫助未來的人。

來源

2013-10-09 19:13:09

Thankk謝謝你謝謝！你剛剛救了我的一天。 – torke1

使用margin auto的中心不起作用

回答

相關問題