div标签/背景不居中答案

【问题标题】：Div Tag/Background Not Centeringdiv标签/背景不居中
【发布时间】：2012-02-11 13:33:38
【问题描述】：

我正处于构建我们网站的移动版本的早期阶段，我已经遇到了 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>

有人可以帮忙吗？

【问题讨论】：

你可以试试 margin:auto，虽然如果你的宽度设置为 100% 不会有任何影响。编辑：另外，您是否尝试过丑陋但可能有效的 html 标签？

标签： html mobile coding-style alignment

【解决方案1】：

将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，将左右边距设置为自动。在这种情况下，浏览器将自动检测可用的边距空间并将其平均分配到左侧和右侧。并且两边的边距相同，元素变得居中。

【讨论】：

成功了！你能解释一下为什么要添加“margin: 0 auto;”吗？为将来的知识解决了这个问题？
太棒了！我对这些东西或多或少还是陌生的，所以非常感谢任何这样的帮助！谢谢大佬！