html - 居中问题

Question

我似乎无法让它工作。

http://www.keironlowe.host56.com

我需要的是带有低不透明度图像的横幅，无论分辨率如何，我都尝试了一个包装器，但因为包装器的宽度为 800，它会切割图像，所以我尝试了 margin:0 auto; 我什至尝试过使用标签，但它仍然没有以更高分辨率为中心。

Answer 1

您不应该需要@Logan 示例中的标签。无论如何，该标签已被弃用。在样式表中设置宽度（不是自动）并将 margin-left 和 margin-right 设置为“auto”应该可以很好地处理居中。

Answer 2

尝试将居中和图片从 CSS 中取出并放入 HTML。CSS看起来像这样：

 #banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}

你的 HTML 看起来像这样：

<div id="banner">
<center>
<img src=".....">
</center>
</div>

这就是我会做的。

Answer 3

首先，去掉<center>你在<div id="banner"></div>. 你不需要它，它已被弃用。

然后，换出以下块的当前 CSS：

#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}

为了这：

#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}

为速记交换了许多背景属性。由于您将图像显示为背景，因此添加background-position到center. 现在，这会将您的图像定位到中心。