Question

我想知道是否有更好的方法来制作一个1600px宽的包装体，以水平居中对齐所有屏幕尺寸。

我正在使用这些：

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;

的样式

如果我误解了您的问题或者这是否有帮助，请告诉我。

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 个答案: