在 HTML td 中以不同方式对齐图像和文本答案

【问题标题】：Align image and text differently inside HTML td在 HTML td 中以不同方式对齐图像和文本
【发布时间】：2017-07-26 02:05:16
【问题描述】：

我有一个表格，表格单元格 (td) 可以同时包含图像和文本。单元格高度可以动态增加或减少。

我希望图像显示在单元格顶部（总是），文本显示在中心（总是）。

我怎样才能做到这一点？

【问题讨论】：

标签： html-table alignment vertical-alignment

【解决方案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：请提供一些代码，因为现在我可以猜到您的请求是什么意思。

【讨论】：

【解决方案2】：

使用 CSS 在 img 上应用 top:0px;向左飘浮; 在 td 上应用 test-align: center

【讨论】：