web前端字体居中_web前端⼊门到实战：⽂本图标对齐的⼏种
解决⽅案
常见的对齐问题：浏览器是基于什么对齐图标和⽂本的？
为什么明明使⽤了 flex或vertical-align，图标还是看起来差了 1 像素没对齐？
⽂字图标布局
开发中遇见图⽚跟⽂字放在⼀⾏显⽰是最常见不过的了，两个⾏内元素的对齐通常也是最令⼈头疼，有时候明明使⽤了最常⽤的对齐⽅法，却总还是有些许偏差，先来看⼀个最基本的⽰例：
html部分：
xx测试对齐Style-
css部分：
.wrap {
width: 300px;
text-align: center;
margin: 20px auto;
font-size: 14px;
}
.wrap img {
width: 20px;
}
未使⽤对齐⽅式的效果如下：
默认的对齐⽅式是baseline，也就是x字母的最下⾯那条线。
这也就回答了第⼀个问题，浏览器的图⽚跟⽂字未额外设置时是基于⼩写字母x的下边缘为基准，也就是vertical-align:baseline;。
怎么让图⽚跟⽂字居中对齐呢，下⾯来看⼏种常见的解决⽅案。
常见的⼏种居中⽅案
1、使⽤vertical-align 居中对齐⽅式
.wrap {
vertical-align: middle;
}
.wrap img {
jquery在线图片
vertical-align: middle;
}
当我们使⽤常⽤的vertical-align对齐⽂本和图⽚时，其实也是有⼀定的偏差的，如下图：
vertical-align的middle值实际上是相对于⼩写字母x的⼀半⾼度来说的，所以图⽚会跟x的中间开始对齐，但是其他字符譬如S、中⽂，就会发现⽆论如何都会出现稍许偏差，图⽚会相对⽽⾔偏下。
2、使⽤vertical-align 同时使⽤span包裹⽂本
让我们再稍做改变，将⽂本部分使⽤span标签包裹，并且对span使⽤vertical-align: middle；样式对齐。会发现此时图⽚会上移少许。 效果如下：
其实严格来说，第⼀种⽅式不算是真正的完全发挥了vertical-align的作⽤，我常常按第⼀种⽅式来实现对齐效果，因为懒得再写⼀层span 标签，但实际上我们可以再尝试把vertical-align: middle；去掉，会发现跟只在img标签上使⽤vertical-align: middle；的效果是⼀样的，也就是说，外层的div上设置vertical-align并没有作⽤。
这是因为，vertical-align起作⽤是有前提条件的，只能应⽤于内联元素以及display值为tabale-cell的元素，且vertical-align不可继承。3、使⽤flex布局
display: flex;
align-items: center;
不过就算是flex布局，有时候也会出现⼀点⼉偏差，⽐如：图⽚尺⼨为偶数、字体font-size为偶数，line-height为偶数时对齐；奇数时偏上1px。
4、使⽤ex单位
这种⽅式是从张鑫旭⽼师的《css世界》中看到的，ex就是⼩写字母x的⾼度，可以⽤在不受字体和字号影响的内联元素的垂直居中对齐效果，PS：不过这种适⽤于图标⾼度跟⽂字⼀致，⽐如字符后⾯加⼀个箭头(点击展开)的情况，就很实⽤。
.wrap img {
height: 1ex;
}
5、vertical-align 数值⽅式的使⽤
如，还是上⾯的基本案列：如果图⽚⾼度是20px，⽂字font-size为22px时，默认对齐是⽂字的基线，那么图⽚会偏上2px，这时只需要将图⽚向下偏移2px，就能实现对齐效果，⽽且vertical-align这个属性的数值型具有很好的兼容性。
.wrap {
width: 100%;
padding-top: 200px;
text-align: center;
margin: 20px auto;
font-size: 22px;
height: 40px;
}
.wrap img {
width: 20px;
vertical-align: -2px;
}
从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项⽬实战【视频＋⼯具＋系统路线图】都有整理，在线解析，学习指导，点：【WEB前端学习圈⑤】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。