0

私はChromeでこのコードを使用しています.

<div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle">
   <img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';">
   <div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"></div>
   <div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"></div>
</div>

メイン div (infobox_mainpic) のサイズは 600px*450px に固定されています。私の目的は、内側の画像を垂直方向および水平方向に中央に配置することです。すべての画像の幅が 600px を超え、450px を超えることはできないことに注意してください (治療を受けています)。

2 つの div "mainpic..." は、この図のようにメイン div の上から絶対に位置することになっています。

ここに画像の説明を入力

これを達成するために、私は infobox_mainpic で使用しました

display : table-cell;
vertical-align : middle;
text-align:center;
position : relative;

そして、矢印で、私は使用します

position : absolute;
top : 130px;

これは Chrome と IE で動作します。問題は、相対位置が Firefox で機能しないことです。すべてを div 内にラップして適用しようとしましたposition : relativeが、現在、矢印はメイン div の上部からではなく、画像の上部から開始しています。ラッパー div の幅と高さを 100% に設定すると、画像は垂直方向に整列しません...

解決策はありますか？

4

3 に答える 3

1

いくつかのテストの後、解決策を見つけました。

div ラッパーを infobox_mainpic 内に配置する代わりに、infobox_mainpic を相対位置を持つ div 内に配置します。このようにして、矢印は正しく配置され、img はまだ table-cell div 内にあるため、正しく中央に配置されます。

于 2013-06-26T13:29:24.223 に答える
0

isplay:inline-block代わりにd を使用してtable-cellください。relativeポジショニングはもうバグることはありません。

boxe とline-height同じに設定し、次のように設定します。heightimgvertical-align:middle;

矢はボックスの外に立っている可能性があります。inline-block同様にvertical-align:middle;、それらはボックスの中央中央に脇に立っています。この時点でposition:absoluteは、もう必要ありません。

デモhttp://codepen.io/gcyrillus/pen/iAlms

オフラインになる

于 2013-06-26T13:29:57.717 に答える
0

これは Chrome と IE で動作します。問題は、相対位置が Firefox で機能しないことです。

これは、Firefox がまだCSS 2.1 仕様に従っているためだと思います。

「table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、および table-caption に対する 'position:relative' の効果要素が定義されていません。」

それは CSS 3 で変更されましたが、それに頼るのはまだ早いようです。

于 2013-06-26T13:31:20.783 に答える