Question

我正在制作一个网站并尝试将图像头集中在一起。但是，它似乎没有起作用。

这是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;添加到图片中，但它仍未居中。我怎么能这样做？

Answer 1

使用以下内容修改包含图像的div的css：

margin: 0 auto;
width: 100%;

Answer 2

你的包装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);
}

Answer 3

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

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

标题图像将无法正确居中

3 个答案: