html - 跨浏览器使图像和滑块居中

Question

现在我的轨道滑块工作得几乎完美，我发现了一个新问题。我正在使用 chrome 作为主浏览器的 13 英寸 macbook pro。在 chrome 中一切看起来都很好。但是我做了一个浏览器测试（在知名网站上），它告诉我在几个浏览器上我的滑块或页面没有像它应该做的那样居中。

现在我的问题，有人可以帮我解决这个问题吗？所以我的页面和滑块都居中。我正在使用由单个图像组成的网页，因为它只是一个小测试。但为了完成测试，它应该居中。

链接到该网站

CSS 来定位正文和内容（内容包含图像）

body
{
background-image: url("../afbeeldingen/bg.jpeg");
margin-left: auto;
margin-right: auto;
text-align:center; /*For IE6 Shenanigans*/
}

#content 
{
width: 100%;
}

对于滑块

#featured
{
position: absolute;
top: 152px;
left: 218px;
}

提前致谢

Answer 1

您正在使用绝对定位来使 div 居中，这不是解决方法。这仅以您的屏幕分辨率为中心！如果要居中，请使用width: 850px; margin: 0 auto;

Answer 2

首先，去掉body的width和height。
您的轨道滑块使用绝对位置，这意味着它将找到父相对位置，即您的身体。因此，让我们将您的内容 div 更改为：

#content { 
position: relative;
margin: 0 auto;
width: 1030px;
}

您也可以删除这一整行：

#featured
{
position: absolute;
top: 152px;
left: 218px;
}

看看现在情况如何。