图标文字对齐的几种常见方法
引言
图标文字对齐在平时的工作中是最常见的了,最早学习时候一般都是用vertical-align,但是由于inline-block元素在和文字对齐时候的一些很麻烦的表现(见上一篇文章),大家应该都经历过那种行框高度高出几px的情形。简单暴力的话还可以用absolute定位方法。flex布局出现以后很多时候用flex的居中对齐也是很方便的。
实现
下面就以实现下面这个按钮的样式总结下几种方法:
.btn {display: inline-block;padding: 6px 12px;font-size: 14px;line-height: 20px;text-align: center;white-space: nowrap;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background: #fff;border: 1px solid #ccc;border-radius: 4px;
}
.btn:hover, .btn:focus {color: #333;background-color: #e6e6e6;border-color: #8c8c8c;
}<button class="btn"><i class="icon icon-info"></i> warning</button>
inline-block对齐法
思路很简单,要让图标和文字对齐,就让i
元素高度和和文字行高一致并且是对齐,然后图标背景居中就可以了,问题在于inline-block
元素内没有内联元素则其基线是margin
底边缘,这样和文字对齐时候就会有上下交错导致行框的高度都增高了,既然这样我们只要让i
元素基线和文字基线一致就能保证和文字对齐了,方案就是在其中包含文字同时文字又不显示出来:
.icon {display: inline-block;width: 20px;height: 20px; //等于行高text-indent: -9999em; //隐藏文字white-space: nowrap;
}
.icon::before {content: 'icon';
}
.icon-info {background: url(./info-circle.png) no-repeat center;
}
用元素插入文字,用一个很大的text-indent
来隐藏文字就可以达到想要的效果了。
绝对定位法
说到绝对定位的方法大家肯定都会了,给button
元素设置relative
,然后图标绝对定位:
.btn {...position: relative;padding-left: 32px;
}.icon {position: absolute;width: 20px;height: 20px;left: 12px;
}
如果上层元素没有影响absolute
的定位,其实可以省去button
的相对定位,直接使用无依赖绝对定位即可,用margin-left
调整位置:
.btn {...padding-left: 32px;
}
.icon {position: absolute;width: 20px;height: 20px;margin-left: -20px;
}
flex布局法
这个直接给button设置display:inline-flex;align-items: center;
即可。
总结
关于使用哪一种方法都是可以选择的,但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。
图标文字对齐的几种常见方法相关推荐
- html css图标怎么跟文字并排,科技常识:css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法 的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
- 小图标文字对齐的终极解决方案
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5264 一.一切从l ...
- 为何大量网站不能抓取?爬虫突破封禁的6种常见方法
为何大量网站不能抓取?爬虫突破封禁的6种常见方法 在互联网上进行自动数据采集(抓取)这件事和互联网存在的时间差不多一样长.今天大众好像更倾向于用"网络数据采集",有时会把网络数据采 ...
- 使用定制的NSDictionary的方法,对NSArray进行排序(附:数组排序两种常见方法)
NSArray中存放的是NSDictionary,可以使用策略的方法对NSDictionary进行定制,增加比较的方法.然后调用NSArray的sortUsingSelector方法对数组进行排序,这 ...
- css之文本两端对齐的两种解决方法
css之文本两端对齐的两种解决方法 参考文章: (1)css之文本两端对齐的两种解决方法 (2)https://www.cnblogs.com/wl0804/p/11265225.html 备忘一下.
- 个人建站赚钱的5种常见方法
建站赚钱是很多个人站长做站时避不开的问题,现在通过网站赚钱的人越来越多,但个人站长要模仿百度.淘宝那样赚钱模式却并不现实,而是要有适合个人的方法或途径,那个人建站赚钱方法有哪些呢?主机侦探小编这里汇总 ...
- 用Python解析XML的几种常见方法的介绍
这篇文章主要介绍了用Python解析XML的几种常见方法,包括快速的使用ElementTree模块等方法的实例介绍,需要的朋友可以参考下 一.简介 XML(eXtensible Markup Lang ...
- 【python】python列表去重的5种常见方法实例
Python编程过程中经常会遇到列表去重的问题,下面这篇文章主要给大家介绍了python列表去重的5种常见方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下 前言 列表去重在python实际运 ...
- 测试用例设计的几种常见方法,测试用例的几大要素
一,测试用例设计的几种常见方法 1.等价类划分 2.边界值分析 3.错误推测法 4.判定表法 5.正交实验法 6.因果图法 7.状态迁移 8.流程分析法(场景设计法) 举例说明,链接中有更为详细的举例 ...
- 记录一次Redis未授权getshell几种常见方法
记录一次Redis未授权getshell几种常见方法 一.redis未授权访问简介 Redis默认情况下,端口是6379,默认配置无密码 ./redis-server 使用默认配置 ./redis-s ...
最新文章
- 2022-2028年中国SCR脱硝催化剂行业研究及前瞻分析报告
- 用户、组或角色 'zgb' 在当前数据库中已存在。 (Microsoft SQL Server,错误: 15023)
- 2019区块链行业指南
- 一位 CEO 对 CTO 技术领导力的期待是什么?
- ACL 2019 开源论文 | 使用跨领域语言建模的跨领域命名实体识别
- mysql 开启引擎命令_MySql中启用InnoDB数据引擎的方法
- 嵌入式开发常用工具软件
- bash 与 dash
- collections求和方法_java集合求和最大值最小值示例分享
- exchange2010 取消OWA内更改密码选项
- linux session 设置时间设置,设置linux系统history相关变量,命令时间、保存history条数,多session共享history...
- Answer 3.0 .NET开源网站功能API说明
- 按网络管理模式 计算机网络可分为,计算机网络应用 按网络管理模式分类
- 简单的扫描工具NTscan
- 《吴恩达深度学习》学习笔记011_深度卷积网络:实例探究(Deep convolutional models: case studies)
- word流程图怎么做虚线框_Word2016如何制作虚线文本框?
- Microsoft Office XP 智能标记的安装和安全性
- oracle 关闭归档,Oracle归档的开启和关闭
- 彷徨 | office快捷键大全
- 计算机 班徽设计大赛,班徽设计大赛来啦!
热门文章
- LAMP架构一(介绍)
- 百度富文本编辑器UEditor的使用
- 视频质量评价 VMAF,为何让人又喜又忧?
- NOR Flash、NAND Flash、SPI Flash、CFI Flash
- 《Unix网络编程》环境搭建
- [渝粤教育] 西南科技大学 高等数学2 在线考试复习资料
- fckeditor 源代码下载
- 梦幻古龙 服务器名称修改,【鬼族大话西游】(梦幻古龙改版)虚拟机镜像服务端+配套客户端+GM工具+启动教程...
- TraceView的使用
- 学地质灾害还是学计算机专业,地质灾害与防治技术专科专业介绍