如何水平对齐身体包装纸？

Question

我想知道是否有更好的方法来制作1600像素宽的包装器主体，以使其水平居中对齐所有屏幕尺寸。

我正在使用这些：

if($(window).width() > 1400) { $('body').scrollLeft(80); } if($(window).width() > 1281 && $(window).width() <= 1400){ $('body').scrollLeft(140); } if ($(window).width() < 1280){ $('body').scrollLeft(195); } if ($(window).width() < 1024){ $('body').scrollLeft(300); }

Answer 1

我不确定为什么要为此使用Javascript。 您可以只使用居中内容div； 请参阅随附的代码段（设置为200px宽，但结果相同）。

 .content { width: 200px; margin-left: auto; margin-right: auto; }

 <!DOCTYPE html> <html> <head><title>Body Centering</title></head> <body> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nibh a elit egestas fermentum. Nunc eu velit venenatis, blandit nulla a, gravida justo. Sed accumsan arcu in mi dapibus pretium. In hac habitasse platea dictumst. Nulla fermentum, augue eget aliquam pharetra, turpis diam ornare neque, a interdum ipsum ligula aliquam nunc. Maecenas eu eleifend libero.</p> </div> </body> </html>

Answer 2

如果您尝试创建一个响应式站点，建议您使用@media查询来创建。 在您的CSS中，尝试使用如下所示的内容：

body {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 1400px) {
.wrapper {
    width: 1600px;
}
}
@media screen and (min-width: 1280px) {
.wrapper {
    width: 1280px;
}
}
@media screen and (max-width: 1280px) {
.wrapper {
    width: 1280px;
}
}

当然，我会根据您希望的大小来更改包装纸的宽度大小，但这应该使您的站点能够响应屏幕大小。 另一个选择是制作包装器的样式.wrapper { width: 100%; margin-left: auto; margin-right: auto; .wrapper { width: 100%; margin-left: auto; margin-right: auto;

让我知道我是否误解了您的问题或是否有帮助。

Answer 3

经过几次尝试和错误，我想出了自己的答案。 这有点硬编码，但是到目前为止，这解决了我的问题，即在任何屏幕尺寸上响应地对齐宽div。

$(window).on('resize', function() {
if ($(window).width() <= 1600) {
    $(document).scrollLeft(0);
}
if ($(window).width() <= 1536) {
    $(document).scrollLeft(40);
}
if ($(window).width() <= 1440) {
    $(document).scrollLeft(110);
}
if ($(window).width() <= 1360) {
    $(document).scrollLeft(130);
}
if ($(window).width() <= 1280) {
    $(document).scrollLeft(170);
}
if ($(window).width() <= 1152) {
    $(document).scrollLeft(235);
}
if ($(window).width() <= 1024) {
    $(document).scrollLeft(300);
}
if ($(window).width() <= 800){
    $(document).scrollLeft(400);
}
});

如何水平对齐身体包装纸？

问题描述

3 个解决方案

解决方案1
1 2015-01-20 04:05:36

解决方案2
0 2015-01-20 05:11:02

解决方案3
0 已采纳 2015-01-20 10:35:38

如何水平对齐身体包装纸？

问题描述

3 个解决方案

解决方案1 1 2015-01-20 04:05:36

解决方案2 0 2015-01-20 05:11:02

解决方案3 0 已采纳 2015-01-20 10:35:38

解决方案1
1 2015-01-20 04:05:36

解决方案2
0 2015-01-20 05:11:02

解决方案3
0 已采纳 2015-01-20 10:35:38