CSS: содержимое центра по размеру

У меня есть область содержимого, которая находится в центре от margin:0 auto и имеет width из 1280px. когда я изменяю размер окна браузера, только контент с правой стороны отключается, если браузеры width становятся ниже 1280px. есть ли способ держать весь сайт всегда центрированным, чтобы область содержимого вырезалась слева направо в равной степени?CSS: содержимое центра по размеру

источник

2015-03-18 Verdemis

использовать процентную ширину вместо жесткого значения 1280 пикселей. или медиа-запрос, чтобы изменить это число. ширина вашего контейнера составляет 1280 пикселей и не будет увеличиваться или уменьшаться, поэтому часть вашего контента отключается. – floor

Вы также можете использовать оба: width: 1280px; макс-ширина: 100%; Также можно использовать медиа-запрос для изменения ширины в зависимости от ширины экрана. –

вы могли бы попробовать с mediaquery, в котором вы можете центрирования фиксированной ширины DIV, например,

http://codepen.io/anon/pen/RNqXGW

div { 
    background: #d8d8d8; 
    text-align: center; 
    width: 1280px; 
    margin: 0 auto; 
} 

@media all and (max-width: 1280px) { 
    main { 
     /* hide horizontal scrollbar */ 
     overflow: hidden; 
    } 
    div { 
     /* these properties cut your div equally both 
      on left and right side */ 
     margin-left: 50%; 
     -webkit-transform: translateX(-640px); 
     -moz-transform: translateX(-640px); 
     transform: translateX(-640px); 
    } 
}

источник

2015-03-18 16:51:26 fcalderan

Возможно, вы захотите использовать медиа-запросы, такие как @media для отзывчивого дизайна.

И если содержание изображения, рассмотреть возможность сделать это фон, и установить {background-position: center}

источник

2015-03-18 16:49:13 benjaminz

Если вы действительно необходимо поддерживать содержание width фиксированной в 1280px вы можете использовать некоторые jQuery исправить положение с помощью margin собственности на window.resize событие:

$(this).resize(function(){ 
    var width = $('#itemToKeepCentered').width(); 
    var windowWidth = $(this).width() 
    $('#itemToKeepCentered').css('margin-left', (windowWidth-width)*0.5); 
});

Working пример: https://jsfiddle.net/urahara/oq4uj9q7/2/

Примечание: @mediacss может быть вам полезен.

источник

2015-03-18 17:02:55

Я не могу найти его очень полезным для веб-страницы, но да .. с очень маленьким jquery вы можете сделать свой контейнер посередине, когда больше, чем ширина окна.

Это не значит, что «правая сторона обрезается», это значит, что при большем содержании ширина окна начинается с прокрутки, а полоса прокрутки по умолчанию всегда будет слева (или сверху, если вертикально).

так просто использовать для центрирования пролистайте:

$(function() { 
    scrollTo(($(document).width() - $(window).width())/2, 0); 
});

здесь у вас есть fiddle

Отредактировано: Не будет работать с ручным изменением размера ... попытайтесь изменить размеры, а затем перезагрузите страницу

источник

2015-03-18 17:03:27

CSS: содержимое центра по размеру

ответ

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