html - 在元素内部对齐元素

Question

查看我附加的图像，我试图让包含图像（带有红色边框）的较暗矩形形状与较浅灰色正方形的底部中心对齐。

我曾尝试position:absolute使用 a将深色矩形设置为，0px bottom但随后我使用margin:0 auto. 我也试过只用 avertical-align:bottom但还是不会打球！！！

这样做的正确方法是什么？要记住的一件事是，我使用了 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>

Answer 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 是图像大小的一半，例如，如果您的图像是 100 像素，边框是 5 像素，那么它应该是 -55 像素

如果要在中心的 dak 灰色框底部显示图像，请使用下面的 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 }

如果您仍然发现任何问题，请告诉我

Answer 2

内盒的宽度是否总是相对于外盒？如果是这样，您可以像这样为您的左值使用百分比......

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

Answer 3

像这样写：

.item_preview_img_wrap { 
 width:170px; 
 height:105px; 
 position:absolute;
 left:50%;
 margin-left:-85px;
 bottom:0;
 background:#CCC; 
 }