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标签/背景不居中

回答

相关问题