vertical-align属性在CSS中的功能和用法讲解

vertical-align属性在CSS中的功能和用法讲解 第一张

vertical-align属性在CSS中的功能和用法

vertical-align属性是用来设置元素的垂直对齐方式的,它可以设置行内元素和表格单元格元素的垂直对齐方式。vertical-align属性可以设置的值有:baseline、top、middle、bottom、text-top、text-bottom、sub、super等。

baseline值:baseline值是vertical-align属性的默认值,它表示将元素的基线对齐,基线是指文本行的基线,基线是指文本行中最低的字符的底部。

top值:top值表示将元素的顶部对齐,它表示将元素的顶部与父元素的顶部对齐。

middle值:middle值表示将元素的中部对齐,它表示将元素的中部与父元素的中部对齐。

bottom值:bottom值表示将元素的底部对齐,它表示将元素的底部与父元素的底部对齐。

text-top值:text-top值表示将元素的顶部与父元素文本的顶部对齐,父元素文本的顶部是指父元素中最高的字符的顶部。

text-bottom值:text-bottom值表示将元素的底部与父元素文本的底部对齐,父元素文本的底部是指父元素中最低的字符的底部。

sub值:sub值表示将元素的底部与文本的下标线对齐,下标线是指文本行中最低的字符的底部。

super值:super值表示将元素的顶部与文本的上标线对齐,上标线是指文本行中最高的字符的顶部。

vertical-align属性的使用方法:

<style type="text/css">
    .box {
        vertical-align: top;
    }
</style>

上面的代码就是使用vertical-align属性将元素的顶部与父元素的顶部对齐,其中top就是表示将元素的顶部与父元素的顶部对齐。

:vertical-align属性是用来设置元素的垂直对齐方式的,它可以设置行内元素和表格单元格元素的垂直对齐方式,vertical-align属性可以设置的值有:baseline、top、middle、bottom、text-top、text-bottom、sub、super等,使用方法是在style中设置vertical-align属性。

© 版权声明
THE END
分享