将图像保留在 div 的底部，但文本略高于答案

【问题标题】：Keep image at bottom of div, but text slightly above将图像保留在 div 的底部，但文本略高于
【发布时间】：2013-11-07 20:51:03
【问题描述】：

http://jsfiddle.net/Hz4JF/1/ 显示我的 html + css。

我的目标是让图像位于容器的底部，并且文本有一个小的边距，不会导致图像向上移动。

今天是星期一，如果这是一个简单的问题，请原谅。

HTML：

<div id="wrapper">
    <div id="superimpose">
        <img id="photo" src="http://i.istockimg.com/file_thumbview_approve/10391672/2/stock-photo-10391672-portrait-of-a-businessman-with-arms-crossed.jpg">
        <div id="text">
            <span id="name">Bob Smith</span>
            <span id="phone">123-456-7891</span>
        </div>
    </div>
</div>

CSS：

#superimpose{
    position:absolute;
    bottom:0;
    left:0;
}
#photo, #text{
    display: inline-block;
}
#text{
    margin-bottom:15px;
    text-align: center;
}
#text span{
    display: block;
}

附： - 我在#text 中使用跨度是有充分理由的。

【问题讨论】：

您是否试图让文本始终显示在图像上方 15 像素处？

标签： html css css-position margin absolute

【解决方案1】：

这里是解决方案（我不确定我是否完全理解您的问题）：
http://jsfiddle.net/Hz4JF/11/

#text{
    position:relative;
    bottom:100px;
    text-align: center;
}

【讨论】：

【解决方案2】：

这是由于margin collapse。只需添加overflow: auto;

演示http://jsfiddle.net/Hz4JF/6/

【讨论】：

【解决方案3】：

将vertical-align: bottom; 添加到#photo, #text 会产生与您的描述相似的结果：

http://jsfiddle.net/zeTjn/3/

这就是你想要的吗？

【讨论】：

完美 - 谢谢！这完全符合我的要求。
@JoshLevinson 很高兴我能帮上忙 :)