0

添付の画像を見て、画像（赤い境界線付き）を含む暗い長方形の形状を、明るい灰色の正方形の下部中央に揃えようとしています。

ここに画像の説明を入力してください

で暗い長方形をに設定しようとposition:absoluteしました0px bottomが、を使用して中心の配置を失いましたmargin:0 auto。私も使ってみましたvertical-align:bottomが、まだボールが出ません!!!

これを行う正しい方法は何ですか？覚えておくべきことの1つは、170 x 105のサイズを使用した場合、これらは動的に生成される要素であるため実際には不明であり、サイズは可変であるということです。

これはこれまでの私のコードです：

.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }

<div class="gallery_item">
    <div class="item_preview">
        <div class="item_preview_img_wrap">
            <img src="asf.jpg">
        </div>
    </div>

    <div class="item_options">
        options
    </div>

    <div class="item_info_header">
        <div class="date">Date</div>
        <div class="item">ID</div>
        <div class="clear"></div>
    </div>

    <div class="item_info_main">
        <p class="caption">Caption here</p>
        <p class="subject"><strong>People:<strong> People here</p>
    </div>
</div>
4

3 に答える 3

1

薄い灰色のボックスの下部に画像を表示する場合は、以下の CSS を使用します。

.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; } 
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; } 
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }

注: -halfofimagewidth は画像の半分のサイズです。たとえば、画像が 100px で境界線が 5px の場合、-55px にする必要があります。

中央の暗い灰色のボックスの下部に画像を表示する場合は、以下の CSS を使用します。

.item_preview { width:220px; height:200px; text-align:center; background:#EEE; } 
    .item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; } 
    .item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }

それでも問題が見つかった場合はお知らせください

于 2012-04-16T12:21:46.873 に答える
0

内側のボックスの幅は常に外側のボックスに対して相対的ですか? もしそうなら、左の値にパーセンテージを使用できます...

http://jsfiddle.net/hcharge/zYprr/

于 2012-04-11T16:17:30.077 に答える
0

次のように書きます。

.item_preview_img_wrap { 
 width:170px; 
 height:105px; 
 position:absolute;
 left:50%;
 margin-left:-85px;
 bottom:0;
 background:#CCC; 
 }
于 2012-04-11T16:17:47.677 に答える