CSS基础

vertical-align 设置行内基线和居中对齐

2019-01-20  本文已影响0人  安琪拉D夏亚

vertical-align 的特点

值 描述
length 通过指定的长度来提高或降低一个元素。可使用负值。
% 通过 "line-height" 属性的百分比来提高或降低一个元素。可使用负值。
baseline 默认。把元素的基线与父元素的基线对齐。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标。
top 把元素的顶端与行中最高元素的顶端对齐。
text-top 把元素的顶端与父元素字体的顶端对齐。
middle 把元素放置在父元素的中部。
bottom 把元素的底端与行中最低元素的底端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

demo 使用 vertical-align 将图片与文字底部对齐

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            p{
                border: 1px solid black;
                /*display: flex;
                align-items: flex-end;*/
            }
            b{
                border: 1px solid black;
                font-size: 30px;
                color: red;
                padding: 0 5px;
                vertical-align: bottom;
            }
            img{
            /* bottom：将元素的底端与行中最低的元素的底端对齐*/
            /* text-bottom：将元素的底端与父元素字体的底端对齐*/
                vertical-align: bottom; /* 图片与行中最低的元素的底端对齐*/
                width:50px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div>
            <p style="border-bottom: 1px solid black;">
                test<b>reality</b>paragragh
                <img src="img/small08.jpg" />
            </p>
        </div>
    </body>
</html>
图片与文字的底部对齐

demo vertical-align 使其行内的文字之间基线对齐

<style>
...
    b{
        border: 1px solid black;
        font-size: 30px;
        color: red;
        padding: 0 5px;
        /* baseline (默认),把元素的基线与父元素的基线对齐。*/
        vertical-align: baseline; /* bottom 改为 baseline*/
    }
    img{
        vertical-align: baseline; /* 图片的底部与文字基线对齐，而不是底部*/
        width:50px;
        border:1px solid black;
    }
...
</style>
图片尽量不要与文字基线(baseline)对齐

demo vertical-align 图片与文字居中对齐

<style>
...
img{
    vertical-align: middle; /* bottom 改为 middle*/
    width:50px;
    border:1px solid black;
}
...
</style>
图片与文字都在一个 p 标签之内的居中对齐

vertical-align 属性失效

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            p{
                border: 1px solid black;
    /* 设置了 display: flex; 属性之后，vertical-align，text-align 属性都会失效*/
                display: flex;
                /* 如果依然要其中的元素底部对齐，可以使用*/
                /*align-items: flex-end;*/
            }
            b{
                border: 1px solid black;
                font-size: 30px;
                color: red;
                padding: 0 5px;
                vertical-align: baseline; /* bottom 改为 baseline*/
            }
            img{
                vertical-align: middle;
                width:50px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div>
            <p style="border-bottom: 1px solid black;">
                test<b>reality</b>paragragh
                <img src="img/small08.jpg" />
            </p>
        </div>
    </body>
</html>
单纯设置 display: flex; 的情况
再次添加 items-align: flex-end; 时候的情况
改成 items-align: flex-end; 时候的情况，此时行内所有元素都是垂直居中

Reference

怎么应用vertical-align，才能生效？
vertical-align和text-align区别
Style verticalAlign 属性
利用vertical-align:middle垂直居中
CSS vertical-align 属性

上一篇 下一篇

猜你喜欢

热点阅读