跨浏览器使图像和滑块居中答案

【问题标题】：Cross browser centering an image and a slider跨浏览器使图像和滑块居中
【发布时间】：2012-10-07 13:45:47
【问题描述】：

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

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

link to the site

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;
}

提前致谢

【问题讨论】：

请提供一些或最少数量的标记和 CSS，以便我们为您提供帮助。
@amn 编辑并插入了用于定位元素的 css。
请不要给BODY元素设置固定的宽度或高度，这会导致某些客户端出现难看的白色边框……

标签： html css center centering orbit

【解决方案1】：

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

【讨论】：

所以基本上我对图像做同样的事情，无论大小，它们都会在同一个位置？
您可以为任何元素分配一个宽度然后margin:auto;，它将在其父元素内居中。这意味着将其置于屏幕中心，父级必须与屏幕一样宽

【解决方案2】：

首先，从正文中删除宽度和高度。
您的轨道滑块使用绝对位置，这意味着它将找到父相对位置，即您的身体。因此，让我们将您的内容 div 更改为：

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

您也可以删除这一整行：

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

看看现在情况如何。

【讨论】：