html - 如何使用 CSS 将 div 定位在页面中间同时支持动态宽度？

Question

请在此处查看 jsFiddle:http://jsfiddle.net/xv9Wq/9/

我想做的是创建一个居中并支持动态宽度的页眉横幅。

以前，我有一个宽度为 100% 的标题横幅包装器，然后将标题横幅居中。问题是横幅会阻塞标题横幅下方的页面。

如何在页眉横幅内支持动态内容长度的同时将页眉横幅定位在页面中央？

Answer 1

您不能将宽度未知的绝对定位元素居中，所以这里有一个解决方法。

参见: http://jsfiddle.net/thirtydot/xv9Wq/25/

CSS:

#headerBanner {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 40px;
    z-index: 2;
    height: 0;
}
#headerBanner > div {
    background: red;
    display: inline-block;
    /* if ie7 support is desired: */
    *display: inline;
    zoom: 1;
}

HTML:

<div id="headerBanner">
    <div>Centered on page. Supporting dynamic width.</div>
</div>