<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
上图是显示表格数据。当图像和文本在表格单元格内对齐时。 当文本较小时,这很好用。但是当文本大时。文字出现在图片下方。
在上图中,如果长度很大,我需要使“购物”工作应该在“类型”下方。文字不应出现在图片下方。我该如何解决这个对齐问题
最佳答案
应用 display:inline-block
或 float:left
你可以对齐两者
.divin{
display:inline-block;}
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>
关于html - 表格单元格与图像和文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53427811/