如何水平居中对齐 body 包装器？

Question

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

我正在使用这些：

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

如何水平居中对齐 body 包装器？

how to horizontally center align body wrapper?

html

css

scrollbar