标题图像不会正确居中答案

【问题标题】：Header image will not center correctly标题图像不会正确居中
【发布时间】：2014-02-04 07:33:48
【问题描述】：

我正在创建一个站点并尝试将图像头部居中。但是，它似乎不起作用。

这是 HTML：

<body>
    <div id="templatemo_header">
        <div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>  
    </div>
</body>

还有 CSS：

#templatemo_header {
    height: 263px;
    border-top: 5px solid #FFF;
    overflow: visible;
    width: 762px;
    float: left;
    background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
    width: 762px;
    margin: 0 auto;
}

我尝试将margin: 0 auto; 添加到图像中，但它仍然没有居中。我该怎么做？

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布 Short, Self Contained, Correct Example (SSCCE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
您需要居中的标题部分吗？请粘贴您的相关代码。
如果您不在问题中添加一些代码作为问题的参考，这个问题将在 6 个月内（或您更新网站的那一刻）成为垃圾。

标签： html image

【解决方案1】：

修改包含图像的 div 的 css：

margin: 0 auto;
width: 100%;

【讨论】：

【解决方案2】：

将以下内容添加到您的 CSS 文件中：

.image { width:762px; margin:0 auto;}

【讨论】：

【解决方案3】：

您的包装 div 与图像的宽度相同，这会阻止自动应用任何边距，因为没有空间。

有几种方法可以解决这个问题，但最简单的方法是将 templatemo_header（包装器 div）的宽度设置为 100%。这样图像边距可以扩大，从而使图像居中。

所以在你的 css 中，将宽度从 762px 修改为 100%，如下所示：

#templatemo_header {
    height: 263px;
    border-top: 5px solid #FFF;
    overflow: visible;
    width: 100%;
    float: left;
    background: url(images/templatemo_headerimg_bg.jpg);
}

【讨论】：