表格td中同时有图片、输入框时，怎么让它们垂直居中？
发布日期：2021-05-14 23:01:55
浏览次数：29
分类：精选文章
本文共 335 字，大约阅读时间需要 1 分钟。
当表格中的td单元格同时包含输入框和图片时，会经常出现位置错乱的问题。以我之前遇到的一个具体情况为例，前面设置的界面显示为：
设置前
而设置后的界面显示为：
设置后
经过分析，这个问题的产生原因是由于图片的对齐方式没有正确设置。解决方案是为img标签设置合适的CSS样式。具体来说，只需在img标签中添加如下 CSS 样式即可：
vertical-align: middle;
这样一来，图片与输入框的内容就会水平居中，避免出现位置错乱的情况。
为了验证这个解决方案的正确性，我在实际项目中尝试过，并发现效果确实如预期。图片的位置稳定地处于输入框的正上方或正下方，与内容完全对齐。
总之，当遇到类似问题时，可以通过简单的CSS样式调整来实现解决方案，而不需要复杂的改动。
发表评论
最新留言
很好
[***.229.124.182]2025年04月23日 18时33分14秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
spring-boot-2.0.3之redis缓存实现，不是你想的那样哦！
2019-03-06
httprunner学习23-加解密
2019-03-06
有道云笔记 同步到我的博客园
2019-03-06
李笑来必读书籍整理
2019-03-06
http头部 Expect
2019-03-06
Hadoop（十六）之使用Combiner优化MapReduce
2019-03-06
《机器学习Python实现_10_06_集成学习_boosting_gbdt分类实现》
2019-03-06
CoreCLR源码探索(八) JIT的工作原理(详解篇)
2019-03-06
IOS开发Swift笔记16-错误处理
2019-03-07
flume使用中的一些常见错误解决办法 （地址已经使用）
2019-03-07
andriod 开发错误记录
2019-03-07
C语言编译错误列表
2019-03-07
看明白这两种情况，才敢说自己懂跨链！ | 喵懂区块链24期
2019-03-07
张一鸣：创业7年，我经历的5件事
2019-03-07
《web安全入门》（四）前端开发基础Javascript
2019-03-07
python中列表 元组 字典 集合的区别
2019-03-07
python struct 官方文档
2019-03-07
Android DEX加固方案与原理
2019-03-07
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461294543 位访客
访问时间: 2025-05-05 17:06:50
访问IP: 3.145.177.173
Copyright © 2020 - 2025 css8.cn 京ICP备2021015314号-1
手机版