Хорошо, у меня есть следующий HTML:Как центрировать div с динамическим и статическим содержимым?
<div id="header">
<div id="header_inner">
<div id="header_image">
<a href=""><img src="..."/></a>
</div>
<div id="header_content">
<h1 id="header_content_h1">Dynamic Content</h1>
</div>
</div>
</div>
И я хочу, чтобы отцентрировать DIV с идентификатором header_inner
.
Но моя проблема в том, что div с id header_content
содержит динамический контент, поэтому он может быть любой ширины.
В настоящее время я решить эту проблему, установив ширину header_inner
с помощью Javascript в window.onload
и нормальный CSS для центрирования DIV (в margin:auto;
), но это приводит к тому, содержание сначала загрузить на левой части страницы, а затем перейти к центру после несколько миллисекунд. Скачок очень заметен на реальном сайте.
JSFiddle: http://jsfiddle.net/wprggrm2/4/
* Скачок не появляется в JSFiddle, но это на живом сайте; это просто показать вам, как я делаю это в действии!
Итак, любые идеи для альтернативных решений, которые позволили бы избежать этого прыжка? Я имею в виду, я предполагаю, что это обычная ситуация.
Вы злоупотребляют поплавки. Похоже, что они вам в действительности не нужны: http://jsfiddle.net/wprggrm2/6/ – dfsq
FWIW, переход вызван задержкой в браузере, загружающей все содержимое страницы, затем происходит событие 'window.onload' после загрузки страницы. Вы * можете * минимизировать это с помощью 'document.ready'? – Jongosi