在元素内部对齐元素

Question

看着我的附图，我试图得到一个较暗的矩形形状，包含一个图像（带有红色边框），在浅灰色正方形的底部中心对齐。

我尝试使用position:absolute将暗矩形设置为0px bottom，但后来使用margin:0 auto丢失了我的中心对齐方式。我也试过使用vertical-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是图像大小的一半，例如，如果图像为100px且边框为5px，则应为-55px

如果要在中心的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; 
 }