关于vertical-align属性

关于vertical-align的值

baseline,top,middle,bottom,分别是基线、顶线、中线、底线对齐的方式。

块级元素内行内块元素和行内元素的默认对齐方式

在这里插入代码片
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .father_div {
            background-color: pink;
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }

        .son_div {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }
    </style>

<div class="father_div">
        <div class="son_div"></div>
        <span>测试</span>
 </div>

上述代码的运行结果可以看出，行内块元素与行内元素的基线相对齐。

在行内块元素中加入middle

在这里插入代码片
.son_div {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: skyblue;
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }

运行的结果是行内块元素的中线和行内元素的基线相对齐。

把行内块元素中的vertical-align移到行内元素中

在这里插入代码片
.son_div {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }

        span {
            vertical-align: middle;
        }

可以看出行内元素的中线和行内块元素的基线向对齐。

小结论

通过以上的结果可以认为，行内块元素和行内元素默认都有一个vertical-align=baseline，所以出现图一的结果，它们两个的基线相对齐；在行内块元素中加入vertical-align=middle，而行内元素中还是vertical-align=baseline，所以出现图二的结果，块级元素的中线和行内块元素的基线相对齐；图三同理。

由小结论扩展

再加入一个行内块元素，是分析上述小结论是否正确。

在这里插入代码片
 .father_div {
            background-color: pink;
            width: 300px;
            height: 300px;
            margin: 0 auto;

        }

        .son_div {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }

        .son_div2 {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: red;
            width: 100px;
            height: 100px;
        }

        span {
            vertical-align: middle;
        }

<div class="father_div">
        <div class="son_div"></div>
        <div class="son_div2"></div>
        <span>测试</span>
    </div>

因为行内元素中设置了vertical-align:middle，所以.son_div的基线和.son_div2的基线和行内元素的中线相对齐。

在.son_div中添加vertical-align:middle

可以看出.son_div的中线和.son_div2的基线和span的中线相对齐。我们看到.son_div和span的都是vertical-align:middle，它们两个中线对齐。由此可以使用一个行内块元素从而，达到垂直居中的效果。见下述扩展

扩展(实现垂直居中)

在这里插入代码片
 .father_div {
            background-color: pink;
            width: 300px;
            height: 300px;
            margin: 0 auto;

        }

        .son_div {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: skyblue;
            width: 100px;
            height: 100px;
            vertical-align: middle;
        }

        .son_div2 {
            /*div转换为行内块，作用相当于图片*/
            display: inline-block;
            background-color: red;
            /*和father_div一样高*/
            height: 100%;
            /*也要加上middle值*/
            vertical-align: middle;
        }

 <div class="father_div">
        <div class="son_div"></div>
        <div class="son_div2"></div>
    </div>

达到垂直居中的效果

结论

每一个行内块元素和行内元素中都默认vertical-align: baseline，所以它们的基线对齐；修改自身的vertical-align=y，y可以是top，middle，bottom等，即拿自己的顶线、中线、底线等和对方的vertical-align的值相对应。