关于块级元素里内联元素们的对齐方式vertical-

xiaoxiao2021-03-01  18

关于块级元素里内联元素们的对齐:

在html5文档下规定如果块级元素里存在内联元素,则该内联元素后面会跟着一个默认的内联元素,而你在进行对内联元素的对齐时,要记住你要对齐的内联元素后面还有一个内联元素,姑且叫做隐形的内联元素把,你要对齐的内联元素是根据隐形内联元素对齐的,如果隐形内联元素后面还有内联元素,如果你不对后面的内联元素进行垂直方向上的对齐方式设置,那么后面的内联元素跟隐形内联元素之间是以默认的baseline对齐方式对齐的。这时候就不要奇怪为什么我设置了前面的内联元素的对齐方式,而后面的内联元素却没有以我预期的方式对齐,其实是因为他们之间还有一个隐形的内联元素在捣乱。 初始状态,以基线对齐:

当我给第一个内联元素设置vertical-align:middle时:

可以看到两个内联元素之间并没有以中间对其方式对齐,你可能会觉得是不是设置失效了,其实并没有失效,第一个内联元素其实是跟隐形的内联元素中间对齐,而后面的内联元素与隐形内联元素之间还是以基线的方式对齐。 如果你要让后面内联元素跟前面一样中间对齐,你可以给后面内联元素也设置对齐方式为middle。

转载请注明原文地址: https://www.6miu.com/read-4050285.html

最新回复(0)