css中vertical-align的使用图解

我们经常要定义行内元素在一行中的垂直位置,从而使其降低或者升高,满足某些布局情况,那么就要用到vertical-align属性。

该属性定义了行内元素的基线相对于该元素所在行的基线的垂直对齐。

如下一段代码:




    
    vertical-align
    


这是一幅ggggg默认值 位于段落中的图像。

这是一幅gggggsub垂直对齐文本的下标。

这是一幅gggggsuper垂直对齐文本的上标。

这是一幅gggggtop把元素的顶端与行中最高元素(这里为p)的顶端对齐。

这是一幅gggggtext-top把元素的顶端与父元素字体的顶端对齐。

这是一幅gggggmiddle把此元素放置在父元素的中部。

这是一幅gggggtext-bottom把元素的底端与父元素字体的底端对齐。

这是一幅gggggbottom把元素的顶端与行中最低的元素(这里为p)的底端对齐。

这是一幅ggggglength自定义距离。

运行图解如下: css中vertical-align的使用图解_第1张图片

你可能感兴趣的:(css篇)