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>

我希望将ID设为id header_inner。

但我的问题是ID为header_content的div包含动态内容，因此它可以是任何宽度。

目前我通过在header_inner使用Javascript设置window.onload的宽度和使用居中div（margin:auto;）的正常css来解决此问题，但这会导致内容最初加载到页面左侧，然后在几毫秒后跳转到中心。在现场网站上跳跃非常明显。

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元素JSFiddle

上的header-inner

如何以动态和娱乐为中心的div静态内容？

2 个答案: