html - 表格单元格与图像和文本对齐
问题描述
<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>
推荐阅读
- java - java中对线程的引用何时超出范围?
- regex - 如何在某个位置删除带有ES字符的行notepad ++
- javascript - select2 选择器不起作用
- java - 无法使用 Selenium 在谷歌新闻页面中获取新闻文章链接
- php - PHP - 如果 IPv4 IP 在 IP 范围内,如何匹配?
- excel - 基于单元格值的随机颜色(名称列)
- linux - bash 中的星号通配符
- ios - 从 ionic 中的可配置文件中读取后端 url
- sql - 获取其中具有一致数据的所有列的总数
- android - 谷歌地图未在 android 的 TabFragment 中完全显示