1

やあみんな私は単にこれを機能させることができません。

マージンを使用してページの中央に配置されたコンテンツがいくつかあります。"騙す"。

このコンテンツには画像があります。画像の下にあるカラーバーをブラウザの横に表示する必要があります。右側では、画像に表示されるように表示する必要があります。

私はこの写真を作成して、私が何を意味するのかをグラフィカルに表示してみました：画像

ご覧のとおり、バーはブラウザの左側から右側に向かって走っています。中央に配置された画像がその上に配置され、次に画像が画像の上部に配置されます。しかし、私はこれを機能させることができませんでした。それをやってみる人はいますか？

バーを相対的でz-indexを低く配置してみました。これは機能しましたが、IE7-8-9ではバーがジャンプし続けます。画像の中央揃えも簡単ではなく、その小さな画像を上に配置するのはさらに困難でした。サイズを変更すると、ブラウザに追従しなくなります。ここでの問題は、ユーザーが新しい画像をアップロードできる必要があるため、静止画像を作成できないことです。

私がここで本当に迷子になっているのを手伝ってください

編集：

以下の例を試しましたが、IE 7-8-9でサイトを実行すると、異なる結果が得られます。リンク

4

2 に答える 2

2

ChromeとIE7-9で動作するjsFiddleを作成しました：http：//jsfiddle.net/7gaE9/

HTML

<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>​

CSS

#container{
   width: 100%;
    margin: 0 auto;   
    background-color: red;
    text-align: center;
    position: relative;
}
#bar1{
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    height: 30px;
    width: 40%;
}
#bar2{
    background-color: blue;
    top: 50%;
    left: 0;
    z-index: 3;
    height: 30px;
    width: 40%;
    position: absolute;
}
img{
    text-align: center;
    z-index: 2;
    position: relative;
}
​
​

ここで重要なのは、コンテナが相対的に配置されるため、親に対する子要素の絶対的な配置が可能になることです。z-indexを使用して、要素のスタック方法を制御します。

于 2012-06-27T18:43:45.957 に答える
-2

私がcssで何かを中央に配置するために使用する方法は次のとおりです。

    .yourclass {
    width:500px;
    position:absolute;
    margin-left:50%;
    left:-250px;
    }

「左」はあなたの幅である必要があり、それからそれを負にします。
今日まで、私はこれに関して何の問題も経験していません。

于 2012-06-27T18:23:45.053 に答える