jquery - 内容居中对齐页面

Question

我想将轮播内容在页面上居中，并且还有一个固定的背景，并根据浏览器调整大小改变高度/宽度。

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

score 1 · Accepted Answer

为了居中它删除cssleft: 50%;上的。ul

对于后台使用这个 css：

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

}

并替换replaceme为您想要的图像。

注意： 背景 css 有一些 css3 artibutes 可能无法在较旧的 Internet Explorer 中使用，如果您不想使用 css3，请考虑使用此站点： http ://www.quackit.com/html/codes/html_stretch_background_image.cfm

score 1 · Accepted Answer

添加

text-align:center;

到身体并移除

left:50%;

从 ul 开始，这将使环形交叉路口居中。

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

score 1 · Accepted Answer

由于上述解决方案都不包括垂直和水平居中，如果这是您想要实现的，请将其添加到您的 ul 类中

ul {

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

}

对于完全可调整大小的背景，我将使用 FrontEndJohn 解决方案，只需记住将 min-width 和 min-height 添加到 body 中，这样您的图像就不会拉伸太多

3 回答 3