0

ここで jsFiddle を参照してください: http://jsfiddle.net/xv9Wq/9/

私がやろうとしているのは、中央に配置され、動的な幅をサポートするヘッダー バナーを作成することです。

以前は、幅 100% のヘッダー バナー ラッパーを使用して、ヘッダー バナーを中央に配置していました。問題は、バナーがヘッダー バナーの下のページをブロックすることです。

ヘッダー バナー内の動的なコンテンツの長さをサポートしながら、ヘッダー バナーをページの中央に配置するにはどうすればよいですか?

4

2 に答える 2

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>
于 2012-06-26T22:15:57.153 に答える
0

コンテンツがバナーで覆われないようにするには、次を試してください: http://jsfiddle.net/xv9Wq/21

于 2012-06-26T22:21:55.450 に答える