Centering text overlays over images in div containers

I have two images to be displayed in two div boxes. I would like the box positions to be fixed and also for text overlays (captions) on the images. The images keep changing and are of varying sizes, so fixing the size of the box prevents the page elements from jumping around.

Not being an expert on the subject I followed a few tutorials to achieve that, the main ones being here and here.

The code am playing with can be found with and modified here and is also pasted below.

Am looking for the caption background to be the exact same width as the caption. And not spill over the side of the image when the image is really small (possibly wrap in that case).

HTML:

<div class="outer">  
<div class="container">
    <div class="wraptocenter">
        <span class="wrimg">
            <div class="shrinkwrapImage">
                <h3 class="caption">Image Caption 1</h3>
                <img src="http://www.google.fr/images/logos/ps_logo2.png" />
            </div>
        </span>

    </div>
</div>
<div class="container">
    <div class="wraptocenter">
        <span class="wrimg">
            <div class="shrinkwrapImage">
                <h3 class="caption">Image Caption 2</h3>
                <img src="http://www.google.fr/images/logos/ps_logo2.png" width="30%"/>
            </div>
        </span>
    &l开发者_开发知识库t;/div>
</div>
</div>

CSS:

    .container * {
        border:1px solid;
    }
    .container {
        position:relative;
        height:400px;
        width:400px;
        margin:0 auto;
    }
    .caption {
        position:absolute;
        padding:0.05em;
        top:0.1em; left:120px; right:120px;
        color: white;
        background: rgb(0, 0, 0); /* fallback color */
        background: rgba(0, 0, 0, 0.4);
        font: 14px Helvetica, Sans-Serif;
        text-align:center;
    }
    .wraptocenter .wrimg{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 400px;
        height: 400px;
    }
    .wraptocenter * {
        vertical-align: middle;
    }
    .wraptocenter {
        display: block;
    }
    .wraptocenter span {
        display: inline-block;
        height: 100%;
        width: 1px;
    }
    .wraptocenter .wrimg img{
        box-shadow: 0px 0px 0.5em #000000;
        border-radius:0.5em;

        max-width:400px;
        max-height:400px;
    }
    .shrinkwrapImage {
        position : relative;
    }

---

The solution that comes to my mind is using a background image

HTML

<div id="pictures">
    <div id="picture1">
        <h3 class="caption">Image Caption 1</h3>
    </div>
</div>

CSS

#picture1 { background: url(http://www.google.fr/images/logos/ps_logo2.png) top center no-repeat; width: 400px; height: 500px; }

---

Remember that the keyword "expression" in CSS, which basically eval JS in your CSS, only works in IE < 8.

I think that I got what you expect here http://jsfiddle.net/sanbor/3Gb6e/8/

---

Here's your solution: http://jsfiddle.net/vonkly/D9hB3/

The container (yellow background) is a fixed size, as requested. The caption currently sits at the top of the image; simply adjust the top: 0; property in the css for .captioned span (note: about 46% will get you a vertically centered caption). The image can be whatever size you want; the caption will always be at the area you specify (and with the proper width).

CSS

.container{
    display: table;
    background: yellow;
    height: 400px;
    width: 400px;
}
.centeritall {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.centeritall .imageWrap {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
}
.imageWrap span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    background-color: black;
}

HTML

<div class="container">
    <div class="centeritall">
        <div class="imageWrap">
            <img src="http://www.placehold.it/300x200" />
            <span>This is a caption for the image...</span>
        </div>
    </div>
</div>