什么是垂直对齐vertical-align
指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。不能用它垂直对齐块无素
必须是行内或者行内块元素

对齐方式有哪些

/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

botton/top line
middle line
base line

应用场景

　　　　使行内元素盒模型与其行内元素容器垂直对齐

　　　　垂直对齐表格单元内容。

　　例子1，清除图片下方空白

图片默认是基线对齐, 所以会使图片下面多出一些空白,需要使用其它对齐方式清除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .vl {
        width: 100px;
        height: 200px;
        background: #ef2;
        vertical-align: middle;
        display: inline-block;
    }

    img {
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div class="vl">


    </div>
    <span>Vertical-align
        Probleom</span>

    <div style="border: 1px solid;vertical-align: middle;display: inline-block;">
        <img src="ball.png" style="
        vertical-align: middle;
    " alt="">默认是基线对齐,会使图片下面多出一些空白,所以需要使用其它对齐方式清除
    </div>
</body>

</html>