如何将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与动态和静态内容对中？

回答

相关问题