本文摘自PHP中文网,作者V,侵删。
开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:
html部分:
1 2 3 4 |
|
推荐教程:CSS入门教程
css部分:
1 2 3 4 5 6 7 8 9 |
|
未使用对齐方式的效果如下:
默认的对齐方式是 baseline ,也就是x字母的最下面那条线。
这也就回答了第一个问题,浏览器的图片跟文字未额外设置时是基于小写字母x的下边缘为基准,也就是 vertical-align:baseline; 。
常见的几种居中方案
1、使用 vertical-align 居中对齐方式
1 2 3 4 5 6 |
|
当我们使用常用的 vertical-align 对齐文本和图片时,其实也是有一定的偏差的,如下图:
vertical-align 的middle值实际上是相对于小写字母x的一半高度来说的,所以图片会跟x的中间开始对齐,但是其他字符譬如S、中文,就会发现无论如何都会出现稍许偏差,图片会相对而言偏下。
2、使用 vertical-align 同时使用span包裹文本
让我们再稍做改变,将文本部分使用span标签包裹,并且对span使用 vertical-align: middle; 样式对齐。会发现此时图片会上移少许。
效果如下:
相关阅读 >>
css如何去除inline-block元素间的间距?(多种方法)
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者