内部相对定位绝对？

Question

这就是我所拥有的：

<div id="container">
<div id="absolute">
  <img src="/test.jpg">
  <div>This is an image</div>
</div>
</div>

容器是相对的，绝对div是绝对的，底部为0，因此它位于容器的底部。

在绝对div中，我想将图像和文字居中放置，使它们并排放置（不在彼此之下）。

我该怎么做？

Answer 1

将div设置为display: inline（或使用默认情况下不是块的元素），并确保容器足够宽以容纳它们。

（但是，这是正常流，而不是相对定位。相对定位会使元素偏离其自然位置（留下间隙））

Answer 2

尝试：

#absolute{position:absolute;bottom:0;text-align:center;width:100%;}
#absolute *{display:inline-block;vertical-align:middle;}

DEMO here.

Answer 3

另一个简单的选择是将内部div（文本在图像旁边）更改为代替div的跨度，或者添加样式显示：内联到该div

丙氨酸：

选项2：

<img src="/test.jpg">
<div style="display:inline;">This is an image</div>