CSS图标文字不对齐

最新推荐文章于 2022-03-18 21:16:57 发布
最新推荐文章于 2022-03-18 21:16:57 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： CSS 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SDD12555/article/details/84645708
版权

页面排版经常遇到‘图标+文字’的需求，如下：图标靠上了，跟文字不对齐

，

但产品要的应该是长这样

怎么办呢？其实很简单，加个样式看看

vertical-align: top/middle/bottom;

浏览器都支持，当然后面的值是上对齐，下对齐，还是居中就要你自己去发挥喽～

A_front
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css图标与文字对齐的两种实现方法
09-24
下面小编就为大家带来一篇css图标与文字对齐的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给的大家做个参考。一起跟随小编过来看看吧
图标文字不对齐问题解决方案
星辰的笔记
12-11 511
目前最简单的解决方法 <div class="icon_box"> <img src="图标.jpg" />文字描述 </div> .icon_box { display: flex; align-items: center; } 给icon_box定义flex并且定义上下居中即可
解决字体图标与文字不对齐的问题
m0_61373014的博客
03-18 710
把字体图标放到一个标签里，可以用i标签，span标签等等等，然后添加定位。
Bootstrap系列 -- 5. 文本对齐方式
weixin_33885253的博客
06-19 506
  一. 文本对齐样式 　　.text-left：左对齐 　　.text-center：居中对齐 　　.text-right：右对齐 　　.text-justify：两端对齐   二. 使用方式 &lt;p class="text-left"&gt;我居左&lt;/p&gt; &lt;p class="text-center"&gt;我居中&lt;/p&gt; ...
小图标和文字对齐
april_4的博客
01-01 1821
图标大小20px，文字font-size有14px，有12px，发现文字的font-size变化，图标也跟着动来动去，想了个办法，把图片设置成绝对定位，这样字体再怎么变化，图标也是居中的 但是觉得很啰嗦的实现 <img style=" margin-top: 9px; position: absolute; display: inline-block; width
css1图标和text上下对齐,CSS图标文字对齐和表单输入框文字对齐兼容例子
weixin_31861055的博客
08-03 807
1.图标和文字对齐一般的图标和文字对齐html代码：前端开发博客javascript:" class="icon">删除前端开发博客zxx的CSS代码：p{line-height:20px; font-size:14px;}.icon {display: inline-block;width:20px; height:20px;background: ...;white-space:nowr...
css 图标和文字对齐 —— 垂直居中对齐，任意位置对齐
朝阳39的博客
01-08 2873
造成图标和文字排版困难的原因 1. 图标本身并不居中 2. 目标图标大小和文本大小/行高不匹配 解决方案 1. 使用 “子绝父相” 的css定位方法，将图片设置为绝对定位，通过 left 和 top 按需自由调整图标的位置 2. 使用 flex 垂直居中布局 参考范例代码如下： <div style="display: flex;align-items: center;border: 1px solid gray;padding: 10px...
html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
weixin_42512966的博客
06-04 2371
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css图标与文字对齐的两种实现方法 的相关资料，希望小伙伴们看了有所帮助。在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如：总结了两种方法，代码量都比较少。第一种对img设置竖直方向对齐为middle，XML/HTML Code复制内容到剪贴板11691168XML/H...
图标跟字对不齐_css:图标与文字对齐的两种方法
weixin_29189003的博客
12-29 3116
(好久没写博客了，这几个月的积累比较零碎，记在本子上，现在开始整理归类)在平时写页面的过程中，常遇到要把小图标与文字对齐的情况。比如：总结了两种方法，代码量都比较少。第一种对img设置竖直方向对齐为middle， 1169 1168div{height:30px;line-hight:30px;}.heart,.comment{vertical-align:middle...
css 输入框 按钮 对齐,CSS图标文字对齐和表单输入框文字对齐兼容
weixin_34901693的博客
08-03 1609
一般来说，我处理图标如果临近的话都会使用同样宽高，然后使用inline-block比较多，表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。1.图标和文字对齐一般的图标和文字对齐html代码：霍者网页设计删除霍者网页设计博客CSS代码：p{line-height:20px;font-size:14px;}.icon{display:inline-bl...
CSS解决文字与图片不能水平居中对齐的问题
09-25
在文字旁边加上一个图标，通过css如何解决文字与图片不能水平居中对齐的问题，下面有个示例，大家可以参考下
CSS控制图片和文字在同一行显示且对齐的3种方法
12-13
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、...
CSSPeeper可视觉化网站CSS样式表
08-10
4、CSSPeeper 核心功能应该是Inspector，当你在 CSSPeeper 开启情况下点选网页中的文字、链结、栏位或按钮，就会侦测出该元件的样式名称、长宽、字型、字体大小、行高、对齐方向及颜色等资讯，对于想知道网页中某个...
前18大旋转修整器企业占据全球87%的市场份额.docx
05-06
前18大旋转修整器企业占据全球87%的市场份额
Planet-SkySat-Imagery-Product-Specification-Jan2020.pdf
05-06
SKYSAT IMAGERY PRODUCT SPECIFICATION PLANET.COM VIDEO Full motion videos are collected between 30 and 120 seconds by a single camera from any of the active SkySats. Videos are collected using only the Panchromatic half of the camera, hence all videos are PAN only. Videos are packaged and delivered with a video mpeg-4 file, plus all image frames with accompanying video metadata and a frame index file (reference Product Types below)
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
05-06
Screenshot_20240506_133458_com.netease.yhtj.vivo.jpg
2019年A~F题特等奖论文合集.pdf
最新发布
05-06
大学生，数学建模，美国大学生数学建模竞赛，MCM/ICM，历年美赛特等奖O奖论文
雷达物位变送器安装和操作手册
05-06
雷达物位变送器安装和操作手册
css中如何设置element ui 表格中的表头文字和行内文字对齐，图标在外面位置
06-06
要在 Element UI 表格中将图标放在单元格的左侧或右侧，并使表头文字和行内文字居中对齐，可以使用以下 CSS 样式： ``` .el-table th, .el-table td { text-align: center; } .el-table th .cell { display: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值