Question

为什么表格单元格中的图像总是较高且没有任何默认填充，另一方面，即使没有边距或填充，文本也总是略低于此值？

想象一下两列：

|     | img |
| txt |     |
|     |     |
|     |     |

文字总是略低于相同的边缘/填充而不是图像...如何解决这个问题，以便两者完全相同？让我们假设图像有v-align：top，我希望文本和图片垂直对齐（看看图片的红线）：

CLICK ME

Answer 1

将CSS规则添加到图像

img {

vertical-align:middle;

}

<强>更新

td {

vertical-align:top;

}

这应该有效：

<强> http://codepen.io/anon/pen/bDoms

Answer 2

最好添加一些像DEMO

这样的风格

<强> HTML

<table class="tg">
  <tr>
    <th class="tg-031e">text</th>
    <th class="tg-031e"><img src="data:image/jpeg;base64,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" alt="" /></th>
  </tr>
  <tr>
    <td class="tg-031e">text 2</td>
    <td class="tg-031e"><img src="data:image/jpeg;base64,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" alt="" /></td>
  </tr>
</table>

<强> CSS

.tg  {border-collapse:collapse;border-spacing:0; }
.tg td{font-family:Arial, sans-serif;font-size:14px;/*padding:10px 5px;*/border-style:solid;border-width:1px;overflow:hidden;word-break:normal; vertical-align:top;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;/*padding:10px 5px;*/border-style:solid;border-width:1px;overflow:hidden;word-break:normal; vertical-align: top;height: 200px;}
img {
  vertical-align:top;
}
td {
  vertical-align:top;
  height: 200px;
}

表中的图像总是高于文本

2 个答案: