如何水平對齊身體包裝紙？

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