Question

Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.

I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I’ve also tried just using a vertical-align:bottom but still won’t play ball!!!

What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.

This is my code so far:

.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

If you want to display image at bottom of light grey box then use CSS below:

.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 }

Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px

If you want to display image at bottom of dak grey box at center then use CSS below:

.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 }

Let me know if you still find any issue