Question

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

有人可以帮忙吗？

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

Div标签/背景不居中

1 个答案: