当前位置: 首页 > Web前端 > CSS

vertical-align和baseline的关系

时间:2023-03-31 00:35:03 CSS

如何让一段文字居中,在人类眼中这么简单的问题,却成了CSS界多年头疼的问题。关于居中的文字很多,但是每次用到的时候还是会出问题。什么是单“中”?css中有两个不同的名字:center和middle。center用于水平居中,middle用于垂直居中。你可以使用中心)。水平居中比较简单,但是垂直居中的问题如果没有搞清楚,这一次就算做了,下次情况稍有不同,就会变得手足无措。关于垂直居中,CSS中最基本的属性是vertical-align。要理解vertical-align,首先要理解baseline,因为vertical-align的默认值是baseline。MDN文档中只有一句话:baseline:default。该元素放置在父元素的基线上。那么这个父元素的基线是什么鬼?我们如何确定父元素的基线在哪里?我们先看一个简单的例子:

    aaa
    bbb
    ccc
    ddd
    eee
    fff
相关的css:.container{border:1pxsolid绿色;}.containerimg{宽度:300px;边框:1px纯红色;垂直对齐:基线;}.aaa{显示:内联块;边框:1px纯红色;vertical-align:baseline;}为了清楚起见,我们给每个元素加一个边框,写成vertical-align:baseline,然后我们看一下效果:注意最左边的那个黑点,我们特别想要保留它。这里可以清楚的看到,当我们指定vertical-align为baseline时,文字是贴在底边的,而图片并没有贴在底部,而是位于文字底线的中间。也就是说,对于图片来说,所谓的“父元素的基线”其实就是指文字底线的中间。文字多的情况是这样,那么文字少的情况呢?同理,图片的底边总是等于我们底行文字的中间:现在我们只改一行代码,让img的vertical-align等于middle,此时,一个奇怪的情况发生了:因为我们最左边的text部分的vertical-align还是baseline,而只有右边img的vertical-align改成了middle,所以整个父元素的baseline就往上漂了,现在的textpart还是和向上漂移的父元素的基线对齐,而图片是根据自己的中间线和父元素的基线对齐,middle就是干这个的。那么我们反过来看,图片还是vertical-align:baseline,但是文字vertical-align:middle呢?正如预期的那样,父元素的基线向上漂移,文本元素在其中间与父元素的基线对齐,图像将其底部边缘与父元素的基线对齐。最后,我们将文字和图片的vertical-align设置为middle:一般来说,这才是我们真正想要的结果。所以结论是,如果我们想让父元素中的两个或多个内联元素垂直居中,需要对所有元素分别设置vertical-align:middle,因为这个属性不能被继承,所以在容器上设置为没用,需要为每个子元素设置。有兴趣的同学可以来我的Codepen玩一玩,看看是不是这样。