时间:2021-05-08
开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:
html部分:
<div class="wrap"> <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt=""> xx测试对齐Style-</div>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 { vertical-align: middle;}当我们使用常用的 vertical-align 对齐文本和图片时,其实也是有一定的偏差的,如下图:
vertical-align 的middle值实际上是相对于小写字母x的一半高度来说的,所以图片会跟x的中间开始对齐,但是其他字符譬如S、中文,就会发现无论如何都会出现稍许偏差,图片会相对而言偏下。
2、使用 vertical-align 同时使用span包裹文本
让我们再稍做改变,将文本部分使用span标签包裹,并且对span使用 vertical-align: middle; 样式对齐。会发现此时图片会上移少许。效果如下:
3、使用flex布局
display: flex;align-items: center;不过就算是flex布局,有时候也会出现一点儿偏差,比如:图片尺寸为偶数、字体font-size为偶数,line-height为偶数时对齐;奇数时偏上1px。
具体参考可查看 iconSize 、 fontSize 和 lineHeight 之间奇偶关系 对齐误差
4、使用ex单位
这种方式是从张鑫旭老师的《css世界》中看到的,ex就是小写字母x的高度,可以用在不受字体和字号影响的内联元素的垂直居中对齐效果,PS:不过这种适用于图标高度跟文字一致,比如字符后面加一个箭头(点击展开)的情况,就很实用。
.wrap img { height: 1ex;}5、vertical-align 数值方式的使用
同样也是在张鑫旭老师的《css世界》中看到的, vertical-align 属性值可以使用数值型和百分比值,
如,还是上面的基本案列:如果图片高度是20px,文字font-size为22p
x时,默认对齐是文字的基线,那么图片会偏上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; }到此这篇关于css记录文本图标对齐的几种解决方案的文章就介绍到这了,更多相关css文本图标对齐内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
问题我们需要以某种对齐方式将文本做格式化处理。解决方案对于基本的字符串对齐要求,可以使用字符串的ljust()、rjust()和center()方法。示例如下:
CSS居中对齐代码中均省略了浏览器前缀以下例子以我的个人的标准排序当然也有更多的居中处理方法但我觉得只有这5种方法是最完善的解决方案flex居中优点:可对未知高
1.vue打包后font-awesome字体失效解决方案:2.打包后图片资源失效解决方案:针对html中引用的图片针对css添加的背景中引用的图片以上这篇基于v
问题你想通过某种对齐方式来格式化字符串解决方案对于基本的字符串对齐操作,可以使用字符串的ljust(),rjust()和center()方法。比如:>>>tex
在HTML代码中,有时会需要在文字旁边加上一个图标。默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐解决办法:在css中设置图片