对齐页面上的内容

我想将旋转木马内容放在页面的中心，并且还有一个固定的背景，并根据浏览器大小调整高度/宽度。对齐页面上的内容

请让我知道如何从代码中完成它。

2012-08-23 Interfaith

为了居中它删除left: 50%;在ul css。

对于后台使用CSS：

body 
{ 
    background-image: url('replaceme'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% 100%; 

}

，并与你想要的图像替换replaceme。

注：背景CSS有一些CSS3 artibutes，可能无法在旧的互联网探索者工作，如果你不想使用CSS3考虑使用这个网站：http://www.quackit.com/html/codes/html_stretch_background_image.cfm

来源

2012-08-23 21:34:59

添加

text-align:center;

身体和删除

left:50%;

从ul，这将以环岛的中心为中心。

至于背景图像，你可以设置div为100％宽度，位置绝对，顶部和底部0px，图像设置为100％宽度以动态缩放，但是为了更好的CSS3方法，请查看csstricks。 com，那里有一个很好的教程。

http://css-tricks.com/perfect-full-page-background-image/

来源

2012-08-23 21:38:01 JohnDevelops

我太慢发布:( – JohnDevelops

天堂答案正在工作，但只在IE但是不在FF中。任何想法？和你的背景信息帮助。谢谢 – Interfaith

天堂的答案是一个旧的CSS技术，用于定义宽度的元素居中，它的工作原理，但不是一个理想的方法imo。当你说它在IE中有效时，你指的是什么版本，你需要支持哪些版本？（IE6或简称IE8 +？）。你有没有尝试我的答案上面，删除左：50％，并添加文本对齐：身体的中心？这是一个非常标准的技术，应该跨浏览器工作。 – JohnDevelops

由于没有上述解决方案包括垂直和水平居中，将它添加到您的UL类，如果这是你正在努力实现

ul { 

list-style: none; 
padding: 0; 
margin: -15em 0 0 -31em; 
width: 62em; 
height: 30em; 
background-color: #0C0C0C; 
top: 50%; 
left: 50%; 

}

对于完全可调整大小的背景我是什么我会继续使用FrontEndJohn解决方案，只是要记住添加最小宽度和最小高度身体，以便您的图像不会延伸太多

来源

2012-08-23 21:45:45 Paradise

天堂，你的样式表完美无缺。但如果你检查它的Firefox，这是不正确的。 – Interfaith

这应该适用于任何浏览器是使用绝对定位的对象进行中心处理的正确方法，请检查此http：// jsfiddle。net/sT7Gh /在FF，Opera，Safari，Chrome，IE7-9上测试，尝试添加position：absolute到你的ul类，当编辑你的规则时我可能会删除这个属性我只注意到它应该在那里 – Paradise

对齐页面上的内容

回答

相关问题