css中图片于文本的基线对齐与vertical-align属性设置
css中图片于文本的基线对齐与vertical-align属性设置
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。
设置各对象的vertical-align属性,属性说明:
baseline-将支持valign特性的对象的内容与基线对齐
sub-垂直对齐文本的下标
super-垂直对齐文本的上标
top-将支持valign特性的对象的内容与对象顶端对齐
text-top-将支持valign特性的对象的文本与对象顶端对齐
middle-将支持valign特性的对象的内容与对象中部对齐
bottom-将支持valign特性的对象的文本与对象底端对齐
text-bottom-将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上
<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>
分类:
HTML+CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!