图标文字对齐的几种常见方法

caige 发布于2019-08-30 15:54 / 2395人阅读

摘要：总结关于使用哪一种方法都是可以选择的，但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。

引言

图标文字对齐在平时的工作中是最常见的了，最早学习时候一般都是用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;
}

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;即可。

总结

关于使用哪一种方法都是可以选择的，但是第一种方法希望大家可以认真去思考下能收获很多关于内联元素对齐的知识。

GPU云服务器云服务器 js缓存的几种方法最基本的几种 html的几种轮播 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117086.html

Vertical-Align: 你应该知道的事情

摘要：引言说起大家都知道他是用在对相邻的文字和内联元素上，比如常见的将一个图标和相邻的文字居中对齐。每个内联元素也有其自己的基线，顶线和底线。内联元素的基线位置低于行框的基线。内联元素的基线相对于行框基线移动相应于行高百分比的数值。平时遇到vertical-align时候会有各种抓狂的时刻，调来调去虽然也弄好了但是心里面一直很虚，因为一直没有透彻理解过这个属性，搜索时候发现了一篇很棒的文章...

yacheng 2019-08-30 15:54 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

LancerComet 2019-08-30 15:56 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

netScorpion 2019-08-02 14:33 评论0 收藏0
前端培训-初级阶段（9 -12）

摘要：前端最基础的就是。往期内容前端培训初级阶段前端培训初级阶段后记惯例补上主讲人文章参考资料引用培训目录出处已备份到笔记字体生成原理及使用技巧查询再聊移动端页面的适配布局教程语法篇布局教程实例篇使用实现手淘页面的终端适配前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS...

MorePainMoreGain 2019-08-26 18:18 评论0 收藏0