html - 在 div 容器中将文本居中覆盖在图像上

Question

我有两个图像要显示在两个 div 框中。我希望固定框的位置以及图像上的文本覆盖(字幕)。图片不断变化并且大小不一，因此固定框的大小可以防止页面元素跳来跳去。

我不是这方面的专家，我遵循了一些教程来实现这一点，主要是 here和 here .

我正在玩的代码可以通过here找到并修改并且也粘贴在下面。

我正在寻找与标题宽度完全相同的标题背景。当图像非常小时(可能在这种情况下环绕)，不要溢出图像的一侧。

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>
    </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;
    }

Answer 1

我想到的解决方案是使用背景图片

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