Div標籤/背景不居中

我在建設我們的網站的移動版本的早期階段我，而我已經有一個div標籤&背景不居中的問題。樣式表代碼如下：Div標籤/背景不居中

<!DOCTYPE html> 
<html><head> 
<style type="text/css"> 
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;} 
header { 
     display:block;text-align:center;width:100%;height:6.5em; 
} 

.topHeader {display:block; width:100%; height:5.4em;} 
#acdlogo { 
    float:left;text-align:left; overflow:hidden; display:inline; 
} 

#acdHeadLinks { 
    float:right;text-align:right;margin-top:5px; 
} 

.clearAll { clear:both; font-size:0; padding:0; margin:0; } 

.search-bg { 
    text-align:center;width:85%;background-color:#265e99; 
    height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px; 
} 
</style> 
</head>

這裏是樣式表的代碼後出現的代碼：

<body> 
<div> 
    <header> 
    <div class="topHeader" align="center"> 
      <div id="acdlogo"> 
      <a href="http://www.test.com/" title="Test"><img src="images/logo.gif" border="0" alt="Alt Text"></a> 
      </div> 
      <div id="acdHeadLinks"> 
       <a href="tel:8005551212"><img src="images/mcontact.png" border="0"></a><br> 
       <a href="">Directions</a> <a href="">My Account</a> <a href="">My Cart</a> 
      </div> 
    </div> 
     <div align="center" class="search-bg" id="searchgcs"> 
     hello world 
    </div> 

    </header> 
</div> 
</body></html>

的問題是，在藍色背景應該保持搜索引擎形式，但它的對齊左邊不是中心，我不知道我需要做什麼來居中。我非常努力地不用使用表格。任何人都可以幫我解決這個問題嗎？謝謝！

更新：好吧，我有一個新的錯誤。我試圖用div標籤將圖片居中放置，即使回答如下，我也沒有找到任何地方。我甚至已經將代碼剝離出來，只是試圖將圖片置於中心位置而不去。圖片始終與div標籤左對齊，我希望它居中。這裏是我的代碼：

<!DOCTYPE html> 
<html><head><title></title> 
<style type="text/css"> 
#mainImage { 
    width:300px; 
    margin:0 auto; 
    padding:0; 
} 
img.curMainImage { 
    max-height:240px; 
    max-width:240px; 
} 

</style> 
</head> 
<body> 
    <div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div> 
</body> 
</html>

任何人都可以幫忙嗎？

來源

2012-01-16 user1100412

您可以嘗試使用margin：auto，但如果您的寬度設置爲100％，則不會有任何影響。編輯：另外，你有沒有嘗試醜陋的，但可能有效的

html標籤？ – bschultz 2012-01-16 16:27:04

添加margin: 0 auto;您.search-bg - http://jsfiddle.net/7djxY/1/

.search-bg {  
    text-align:center; 
    width:85%; 
    margin: 0 auto; 
    background-color:#265e99;  
    height:45px; 
    z-index:1000; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
}

更新：的margin: 0 auto;用於將頂部和底部邊緣設置爲0，左右邊距爲自動。在這種情況下，瀏覽器會自動檢測可用的側邊空間並將其平均分配到左側和右側。並且在相同的利潤空間中，這兩個元素都變成了中心。

來源

2012-01-16 16:25:59

工作正常！你能解釋爲什麼加入「margin：0 auto」解決未來知識的問題？ – user1100412 2012-01-16 16:33:05

Zoltan，你可以通過我剛剛提供的更新提供哪些幫助？ – user1100412 2012-01-20 14:46:21

http://jsfiddle.net/WTDwT/ - 你在找什麼？ – 2012-01-20 15:00:34

Div標籤/背景不居中

回答

相關問題