Как центрировать div с динамическим и статическим содержимым?

Question

Хорошо, у меня есть следующий HTML:

<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, но это на живом сайте; это просто показать вам, как я делаю это в действии!

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

Answer 1

Вы можете использовать display:inline-block на header-inner и text-align:center на header.

#header { 
    width: 100%; 
    display: inline-block; 
    text-align: center; 
} 
#header_inner { 
    display:inline-block; 
} 

Обновлено скрипку: http://jsfiddle.net/wprggrm2/5/

Answer 2

Вам просто нужно max-width на header-inner элемент JSFiddle