Fatal编程技术网
  • html/
  • Html Div标签/背景不居中

Html Div标签/背景不居中

html mobile coding-style

Html Div标签/背景不居中,html,mobile,coding-style,alignment,Html,Mobile,Coding Style,Alignment,我正在构建我们网站的移动版本的早期阶段，我已经遇到了一个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:

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


正文{margin left:0px；margin top:0px；margin right:0px；margin bottom:0px；背景色：#fff；字体大小：12px；颜色：#000000；字体系列：Arial，Helvetica，无衬线；}
标题{
显示：块；文本对齐：中心；宽度：100%；高度：6.5em；
}
.topHeader{显示：块；宽度：100%；高度：5.4em；}
#acdlogo{
浮动：左；文本对齐：左；溢出：隐藏；显示：内联；
}
#acdHeadLinks{
浮动：右侧；文本对齐：右侧；页边距顶部：5px；
}
.clearAll{clear:both；字体大小：0；填充：0；边距：0；}
.search bg{
文本对齐：居中；宽度：85%；背景颜色：#265e99；
高度：45px；z索引：1000；边框半径：5px；-webkit边框半径：5px；
}
以下是样式表代码之后显示的代码：

<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>


#主图像{
宽度：300px；
保证金：0自动；
填充：0；
}
img.curmain图像{
最大高度：240px；
最大宽度：240px；
}
有人可以帮忙吗？

添加
边距：0自动到您的
。搜索bg
-


更新：页边距：0自动用于将上下页边距设置为0，将左右页边距设置为自动。在这种情况下，浏览器将自动检测可用的侧边距空间，并将其平均分配到左侧和右侧。当两边的边距相同时，元素就会居中
 您可以尝试margin:auto，但如果宽度设置为100%，则不会产生任何影响。编辑：还有，你试过丑陋但可能有效的html标签吗？那很有效！你能解释一下为什么添加了“margin:0 auto；”修正了未来知识的问题吗？太棒了！我对这种东西还是有点陌生，所以非常感谢任何像这样的帮助！谢谢你，伙计！

.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;
}