使圖像和文本內聯div div

Question

我需要一些幫助。我一直在尋找，我還沒有找到任何可行的方法。這就是我問這個問題的原因。我試圖讓，使文本和圖像的DIV是內嵌另一個div這樣的：

的圖像和文字下都在一個DIV。這是如何完成的？

Answer 1

給divs一個display: inline-block或float: left風格。我的意願是display: inline-block，因爲你不需要清除後的浮動。

Answer 2

你可以試試這個，這裏的黑盒子是外<div>和內部兩個框嵌套<div> s的以下CSS屬性：

.nesteddiv{ 
    width: 50%; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
} 

.nesteddiv img{ 
    vertical-align: middle; 
} 

Answer 3

我會建議使用<figure>和<figcaption>標籤與display: inline-block組合用於此目的：

#container figure { 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <figure> 
 
     <img src="http://lorempixel.com/100/100/business/1" /> 
 
     <figcaption>Owner</figcaption> 
 
    </figure> 
 
    <figure> 
 
     <img src="http://lorempixel.com/100/100/business/2" /> 
 
     <figcaption>Admin</figcaption> 
 
    </figure> 
 
</div>