центр div горизонтально без "прыжков" - PullRequest
Новая
       11

центр div горизонтально без "прыжков"

2 голосов
/ 14 января 2011

В дополнение к к этому вопросу , я добавил немного JavaScript к этой странице , чтобы разместить #container div по центру.

Однако теперь происходит следующее:

  1. страница загружается в положение по умолчанию
  2. JavaScript включается и перемещается #container централизованно

Поскольку основные изображения достаточно велики, перед «скачком» контента в центральную позицию происходит заметная задержка.

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

#container { margin: 0 auto }

Но я не могу этого сделать, потому что макет (который я не написал) излишне использует много абсолютного позиционирования.

Можно ли как-нибудь устранить этот эффект прыжка, сохранив содержимое в центре?

Спасибо!

Ответы [ 6 ]

1 голос
/ 14 января 2011

Если вы знаете ширину контейнера, вы всегда можете отцентрировать его по абсолютному пути позиционирования: 

#container { position: absolute; left: 50%; margin-left: <negative width divided by 2>; }
1 голос
/ 14 января 2011

Это немного грязно, но не помещайте свой javascript в событие загрузки документа.Поместите его сразу после закрывающего тега конца div.Это сделает его менее заметным

0 голосов
/ 14 января 2011

Я не уверен, что полностью понимаю вопрос .. глядя на CSS, div в любом случае центрируется горизонтально?рассмотрим это правило: 

#container {
  height:616px;
  width:1024px;
  left:50%;
  margin-left:-512px;
  margin-top:100px;
  top: 0px;  
}

оно имеет ширину 1024 пикселя, и мы говорим, что расположите левую сторону справа в середине страницы.тогда отрицательное левое поле, равное половине ширины div, вызывает центрирование div.

Кроме того, я заметил, что некоторые люди рекомендуют установить для div значение visible: hidden, а затем переключить его обратно с помощью JS после позиционирования div.это не очень хорошая практика, так как пользователь без JS никогда ничего не увидит.лучше показывать по умолчанию, скрывать с помощью JS, а затем снова показывать, как только все остальное будет завершено.

пожалуйста, прокомментируйте, если я неправильно понял

0 голосов
/ 14 января 2011

Дайте вашему контейнеру атрибут CSS "видимость: скрытый" для начала, и пусть Javascript удалит его после завершения позиционирования. Он будет выглядеть так, как будто этот элемент немного загружается после остальной части страницы, но он не будет перепрыгивать, и поскольку вы не используете «display: none», контейнер вытолкнет остальную часть содержимого из его ограничительной рамки, даже пока он невидим, поэтому остальная часть страницы не будет прыгать при загрузке.

0 голосов
/ 14 января 2011

Возможно установить CSS, чтобы скрыть #container при загрузке страницы, 

#container { display:none; }

затем .fadeIn() после установки полей. 

$(document).ready(function() {

    setMargins();

    $('#conatiner').fadeIn();

    $(window).resize(function() {
        setMargins();    
    });
});
0 голосов
/ 14 января 2011

или установите его на видимость: скрытый;затем после позиционирования его установите его снова видимым с помощью JavaScript.или даже постепенно. Только хорошо, если у ваших посетителей включена функция js.ну, вы можете установить его скрытым в событии onload или после div с помощью js.так что он все еще будет там, если js деактивирован.

...