如何將div與動態和靜態內容對中？

好吧，我有以下的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>

而且我想用ID header_inner居中DIV。

但我的問題是，ID爲header_content的div包含動態內容，所以它可以是任何寬度。

目前我通過設置header_inner使用Javascript在window.onload寬度和居中div的（margin:auto;）正常的CSS解決這個問題，但是這使內容最初加載頁面的左邊，然後跳轉到該中心後幾毫秒。在現場網站上跳轉非常明顯。

的jsfiddle：http://jsfiddle.net/wprggrm2/4/

*跳轉不在的jsfiddle顯示出來，但它確實直播網站上;這只是爲了向你展示我如何在行動中做到這一點！

那麼任何想法可以避免這種跳躍的替代解決方案？我的意思是我猜這是一種常見的情況。

來源

2014-09-03 user3420034

您濫用彩車上max-width。看起來你並不需要它們：http://jsfiddle.net/wprggrm2/6/ – dfsq 2014-09-03 19:04:24

FWIW，跳轉是由瀏覽器加載所有頁面內容的延遲引起的，然後'window.onload'事件觸發一旦頁面被加載。你可以通過'document.ready'將它最小化？ – Jongosi 2014-09-03 19:04:26

您可以使用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/

來源

2014-09-03 19:04:33 dehrg

你只需要header-inner元素JSFiddle

來源

2014-09-03 19:08:20

如何將div與動態和靜態內容對中？

回答

相關問題