设置<img>在表格<table>中的单元格<td>中水平垂直居中

最新推荐文章于 2022-10-23 00:03:11 发布
最新推荐文章于 2022-10-23 00:03:11 发布
阅读量5.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newzzorg/article/details/8681508
版权
Html代码 :
  1. <td align="center" valign="middle">  
  2.     <img src="images/checkBox.png"/>  
  3. </td>  

    其中 align="center"  为水平居中 ；
            valign="middle"  为垂直居中，这个属性有时不见得好用。

    也可以通过样式设置：

原文参考自站长网：http://www.software8.co/wzjs/html/3394.html

   Html代码 :

  1. <td style="text-align: center;">  
  2.     <img style="vertical-align:middle;" src="images/checkBox.png"/>  
  3. </td>  
362576256
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery可以将转excel的插件
11-04
使用方法： $(function() { $("#btn").click(function(){ $(".table2excel").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "myFileName", exclude_img: true, exclude_links: true, exclude_inputs: true }); }); });
让图片和文字 在同 一个td垂直居中对齐
sangjun的专栏
09-14 1221
让图片和文字 在同 一个td垂直居中对齐 方法一:<img src="add_add.jpg" width="112" height="28" border="0" style=" vertical-align:middle;“/> 方法二:
表格td中同时有图片、输入框时，怎么让它们垂直居中？
终生学习践行者
04-17 3110
  当表格的td中同时有输入框和图片时，常常会出现位置错乱的现象！如下：   怎么解决呢？其实很简单，只需要为img设置css样式： style="vertical-align:middle;"   就可以了！ ...
<td>中的img上下垂直居中代码
u012744265的博客
09-19 9591
预付款:1999元 价格:3999元 医院名称:张三门诊 医院地址:上海市闵行区七宝地铁站吴宝路 医院名称:张三门诊 其中verti
table td 图片水平垂直居中实现代码
韵味朝阳的博客
11-25 3080
设置img在表格table中的单元格td中水平垂直居中，想必很多的朋友都想实现此效果吧，接下来为大家详细介绍下实现代码，感兴趣的你可不要错过了哈或许对你有所帮助 代码如下: 其中 align="center" 为水平居中 ； valign="middle" 为垂直居中，这个属性有时不见得好用。 也可以通过样式设置： Html代码
如何使td内的图片和文字垂直居中?
wu_now的专栏
12-07 5848
HTML code: 常住家庭地址： 广州路11号201 修改该地址 删除该地址 问题：如何使上面代码中的单元格内的图片和文字都垂直居中？ 正解：直接在img里加个style=” vertical-align:middle就可以了，完整代码如下： 常住家庭地址： 广州路11号201 修改该地址 删除该地址 此文转载自：Web开
块元素和行内元素及其元素转换
阿珂学cv
10-23 6767
怎么区分块元素、行内元素以及行内块元素呢，以及他们之间怎么相互转换呢？
JS+CSS设置img在DIV中只显示Img垂直居中的部分
10-26
img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分，下面有个不错的示例，感兴趣的朋友可以参考下
table合并单元格与img图片铺满整个td的html
09-28
主要介绍了table合并单元格与img图片铺满整个td的html,需要的朋友可以参考下
关于div中img,span垂直居中的问题
09-28
下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Python基于PyQt5和SMTP协议实现邮件发送程序案例源码.7z
04-17
该程序采用了Python的smtplib模块和pyqt5模块，实现了自动登录QQ邮箱的功能，并且支持向其他QQ邮箱或如网易邮箱等其他类型的邮箱发送文本邮件和附带文件的邮件。
2024年全球胚胎移植玻璃化冷冻介质行业总体规模、主要企业国内外市场占有率及排名.docx
04-17
2024年全球胚胎移植玻璃化冷冻介质行业总体规模、主要企业国内外市场占有率及排名
多式联运 (1).zip
04-17
多式联运 (1)
sklearn中决策树算法进行泰坦尼克号人员幸存预测
04-17
sklearn中决策树算法进行泰坦尼克号人员幸存预测 有包的导入、数据处理、特征提取、预测结果等
编译原理实验报告（1和2）（可运行）.zip
04-17
编译原理实验报告（1和2）（可运行）
数据库第一次满分上机报告
最新发布
04-17
数据库第一次满分上机报告
完善<table class="table table-hover tar"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <div><tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价：</td> <td colspan="2">600</td> </tr> </div> </tfoot> </table>这个代码让他美观
05-30
要让这个表格更美观，可以使用CSS样式来进行美化。以下是一个例子： ```html <style> .tar { margin: 20px auto; border-collapse: separate; border-spacing: 0px 10px; } .tar th { background-color: #f5f5f5; font-weight: bold; } .tar td { vertical-align: middle; } .tar tbody tr:hover { background-color: #f5f5f5; } .tar tbody td img { display: block; margin: 0 auto; } .tar tfoot td { font-weight: bold; text-align: right; } </style> <table class="table table-hover tar"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯</td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价：</td> <td colspan="2">600</td> </tr> </tfoot> </table> ``` 在这个例子中，我们使用了自定义的CSS样式来美化表格。我们设置了表格的外边距和内边距，以及表格单元格之间的间距。我们还设置了表头的背景颜色和字体加粗，以及表格单元格的垂直对齐方式。我们还使用了:hover伪类来设置鼠标悬停时的背景颜色，并将每个商品的图片居中显示。 你可以根据需要进行调整，并添加其他样式来进一步美化表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值