как горизонтально центрировать выравнивание обертки тела?

Я хотел бы знать, есть ли лучший способ сделать корпус обертки шириной 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); }

источник

2015-01-20 kgam

пожалуйста, дайте ссылку демо –

@JentiDabhi вот ссылка образец: http://kat.isltest.net/col/ – kgam

После нескольких проб и ошибок, я придумал свой собственный ответ. Это немного жестко закодированная вещь, но до сих пор это решает мою проблему, приспосабливая широкие divs в ответ на любые размеры экрана.

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

источник

2015-01-20 10:35:38 kgam

Я не знаю, почему вам нужен Javascript для этого. Вы можете просто использовать центрирующий контент div; см. прикрепленный фрагмент кода (установлен на ширину 200 пикселей, но результат тот же).

.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>

источник

2015-01-20 04:05:36

, что если класс содержание широко 1600 пикселей? он остается слева по умолчанию, поэтому я пытаюсь использовать эти javascripts. – kgam

Март-левый: автоматический и margin-right: авто будет центрировать содержимое div независимо от ширины тела. Если ширина тела меньше, чем содержание div, то да, он будет выровнен по левому краю. Вы можете принудительно установить определенную ширину, добавив ширину (или минимальную ширину) к телу, хотя это не будет очень отзывчивым. –

Или вы говорите, что хотите, чтобы ширина содержимого была потенциально * шире *, чем ширина тела и сила-центровка (то есть прокрутка экрана влево)? –

Если вы пытаетесь создать адаптивный сайт, я предложил бы использовать @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;

Сообщите мне, если я неправильно понял ваш вопрос или если это помогло.

источник

2015-01-20 05:11:02

Я хотел бы, чтобы обертка фиксировалась как 1600 пикселей и была сосредоточена на любом размере экрана. вот моя работа: http://kat.isltest.net/column/ – kgam

@kgam. В ваших текущих настройках есть содержимое внутри обертки, центрированное при установке на 1600 пикселей; Я вижу, что у вас переполнение установлено в скрытый исходный код. вы предполагаете, что вы хотите, чтобы красные и зеленые области были вне поля зрения, а область Серых была сосредоточена? Или вы хотите, чтобы окно просмотра было сосредоточено на странице, чтобы вы могли прокручивать влево и вправо на начальной загрузке страницы? –

Да, окно просмотра будет центрировано, и я могу прокручивать левую и правую панели. результат должен быть оберточным, чтобы центр был центрирован таким образом, чтобы серая область была центрирована, а красные и зеленые панели только что были открыты, а когда вы прокручиваете влево или вправо, вы также можете увидеть красные и зеленые панели. – kgam

как горизонтально центрировать выравнивание обертки тела?

ответ

Смежные вопросы