絕對內相對定位？

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>