利用基线设置行内块元素的居中

最新推荐文章于 2022-11-28 11:11:35 发布

tyvan

最新推荐文章于 2022-11-28 11:11:35 发布

阅读量329

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_51332452/article/details/120246681

版权

前两天在总结元素居中方式的时候看到一篇很简洁但是效果很棒的居中方式

图片万能居中css图片居中_youji8的博客-CSDN博客

代码如下

div{text-align:center;}
div img{vertical-align:middle;}
div:after{content:"";display:inline-block;vertical-align:middle;height:100%;width:0;}

初看挺莫名其妙的。但实际上把after伪元素换成别的，比如span等行内块元素也行，为什么是行内块元素呢？为什么块元素就不行？有两点考虑，第一是需要能够设置高度，第二是需要这个元素能够基线对齐。

这里对父元素div来说，它内部的两个元素，img和after伪元素是在一行的，默认情况下两者都是基线对齐，那么这个基线是谁的？是这两个子元素公用的，也就是说二者的基线是同一条水平线。比如下面这个

html代码

<span>hahahx</span>

</div>

css代码

div {

background-color: aqua;

width: 300px;

height: 300px;

line-height: 300px;

}

div img {

width: 100px;

height: 100px;

}

效果如下

这里这里大概就看得出基线对齐这种方式了，span继承了父元素的行高，对文本来说，height=line-height时文本是要垂直居中的，那么这个时候基线在哪里，就在文本的中线，也就是父元素div中线下方1/2个字符x的高度处，也就是文本下端，所以对图片来说它默认是基线对齐，也就是它的下边界要和基线对齐。为什么当行高和高度相等时，图片总不是居中，而是和中线相差那么几个像素也就是因为相差了这1/2个字符x的高度。

那么反过来，如果不设置行高，也就是在上面的代码中把行高注释掉，会怎么样呢？这个时候首先二者基线肯定还是需要对齐的。但这个时候的基线位置由图片给出，基线就是图片的下边界，所以span里会和这个基线对齐。

效果如下

总的来说，就是父元素里的两个在同一行的行内块元素默认情况下必须要满足基线对齐，这个基线的位置由较大的那个元素给出，在上面的第一种情况下，因为给了div行高，所以span给出的基线要比图片给出的基线更偏下，所以基线的位置被撑开，图片会和span里的文字对齐；而第二种情况，基线被图片撑开，所以span的文字和图片的下边界（也就是基线）对齐。

理解了这个，最开始那个图片居中的原理也就好理解了。vertical-align：middle的意思，就是该行内块元素的中线处在基线上方1/2个字符x高度处的对齐方式。这个时候基线由after伪元素给出，这个伪元素的高度等于父元素的高度，因此基线就会在after伪元素中线（也就是父元素中线）下方1/2个字符x的高度处，那么对图片来说，因为它的对齐方式也是middle，所以它的中线要在基线上方1/2个字符x高度处，因此图片的中线就会和父元素中线重合，图片就居中了。但这个方法还是有些局限性的，比如图片不能比父元素高，比如用了after伪元素，这样after的很多样式都被限制了。但是同样的原理，也可以在img后面加一个空的span标签代替after伪元素，其他设置都一样。