居中问题答案

【问题标题】：Centering Problem居中问题
【发布时间】：2010-12-19 03:18:55
【问题描述】：

我似乎无法让它工作。

http://www.keironlowe.host56.com

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

【问题讨论】：

标签： html css centering

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试将居中和图片从 CSS 中移到 HTML 中。 CSS 看起来像这样：

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

您的 HTML 将如下所示：

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

这就是我会做的。

【讨论】：

【解决方案3】：

首先，去掉<div id="banner"></div> 周围的<center> 标签。你不需要它，它已被弃用。

然后，换掉以下块的当前 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;
}

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

【讨论】：

width 不需要，它将在整个屏幕上拉伸 DIV。