3

これは、以前の SO の質問Anchoring CSS Repeating Background Imageからの続きですが、別の質問として扱うには十分に異なります。

jsFiddle http://jsfiddle.net/By2xj/は、概念を示しています。ブラウザ ウィンドウの幅に応じて表示され、繰り返される左右の画像を繰り返す必要があるバナー画像 (中央) があります。ただし、左右の画像は中央のバナー画像の端に固定する必要があります。この効果は、jsFiddle の結果ウィンドウを拡大すると確認できます。左右の繰り返し画像は常に中央のバナー画像の横に固定され、そこから拡大されます。

これはすべて機能していますが、以前のスタック オーバーフローの質問で提案された CSS が完全には機能せず、ブラウザに少し依存していたため、特に古いブラウザで遊んでいないため、テーブルを使用してこの効果を実現しました。

このテーブル ベースのソリューションでは、ブラウザーの幅がバナーよりも小さい場合でも、常に中央のバナー イメージを中央に配置したいと考えています。jsFiddle Result ウィンドウのサイズを小さくすると、ブラウザーの幅がバナーよりも小さい場合、バナーが中央ではなく左揃えに固定されることがわかります。

だから私の質問は、ブラウザの幅がバナーの幅よりも小さい (そしてテーブルセルを含む) 場合でも、どうすれば常に中央のバナーを中央に揃える (または、より正確には、テーブル全体を中央に揃える) ことができるかということです。

4

3 に答える 3

5

少しチートですが、あなたが探しているものを願っています。

http://jsfiddle.net/By2xj/8/

何が起こっているのかというと、その中央のセルに div を作成し、絶対位置に配置してから、画面の中央に配置します。その div は、ブラウザー ウィンドウのサイズに関係なく、常に中央に配置されます。

記録のために：

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

CSS:

 #banner-table {

    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

#left-image {
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
    background-position: right;
    background-repeat: repeat-x;
}

#center-image {

    width:400px;


}
#center-image div {
    top:0; left:50%;
    margin-left:-200px;
    width:400px;
    height:200px;

    position:absolute;
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
    background-position: center;
    background-repeat: no-repeat;
}
#right-image {
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
    background-position: center center;
    background-repeat: repeat-x;}​
于 2012-07-01T05:45:56.080 に答える
1

テーブルを捨てて、次のようなものを使用できます。

http://jsfiddle.net/bryandowning/f2unW/

于 2012-07-01T05:56:37.090 に答える
0

次のように HTML コードを編集する必要があります。

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

まず、CSS ファイルなしでこれを実装できます。次に、要件に応じてコードをカスタマイズできます。

于 2012-07-01T08:54:17.683 に答える