HTML内でイメージとテキストを別々に整列する

Question

テーブルセル（td）にイメージとテキストの両方を入れることができるテーブルがあります。セルの高さは動的に増減できます。

画像をセルの上（常に）と中央のテキスト（常に）に表示します。

どうすればこの問題を解決できますか？

Answer 1

HTML：

<table> 
<tr> 
    <td><div> 
     <img src="http://imgur.com/a/1s17J"> 
    </div> 
    <div> 
    Text 
    </div></td> 
    <td><div> 
     <img src="http://imgur.com/a/1s17J"> 
    </div> 
    <div> 
    Text 
    </div></td> 
    <td><div> 
     <img src="http://imgur.com/a/1s17J"> 
    </div> 
    <div> 
    Text 
    </div></td> 
    <td><div> 
     <img src="http://imgur.com/a/1s17J"> 
    </div> 
    <div> 
    Text 
    </div></td> 
</tr> 
</table> 

CSS：

は

td img 
{ 
    float:top; 
} 

td 
{ 
    background-color:red; 
    width:150px; 
    height: 50px; 
    text-align:center; 
} 

Fiddle

PS：今私はちょうどあなたがあなたの要求によって意味でした何を推測することができるので、いくつかのコードを提供してください。

Answer 2

use css on img apply top：0px; float：left; on td apply test-align：center