关于行内（块）元素vertical-align：middle；居中对齐

有时候 会发现 对行内元素或者行内块元素设置垂直居中vertical-align：middle；与不设置，没有什么变化
这是因为vertical-align不是作用于行内（块）元素自身，它是作用于其他行内（块）元素；而且它自身的文字内容默认是通过基线对齐影响的。这里它的基线可以理解为与其父元素对齐

谈到vertical-align就要谈到行内（块）元素，所以我们要探讨的是行内元素/行内块元素与文字的对齐关系。如果不是行内元素或者行内块元素 没有什么可关注的 因为块级元素单独成行

1.当行内块元素与/行内元素中没有文字内容时，默认行内块元素与文字的基线对齐；

  div {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
 <div></div>哈哈哈哈

当行内块元素与/行内元素中有文字内容时，文字与行内（块）元素对齐
也就是行内块元素如果对里面的文字是顶部对齐，文字也与行内元素里面的文字内容对齐（在顶部）

 div {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
         <div>嘻嘻嘻嘻</div>哈哈哈哈

注意input标签 默认近似垂直居中对齐 所以这里我们行内元素外的文字也会近似居中对齐 这时候只需要稍微调整一下就可以了

 <style>
        input {
            width: 200px;
            height: 200px;
            background-color: pink;
            vertical-align: middle;
        }

        span {
            display: inline-block;
        }
    </style>

  <!-- input标签输入的文字内容默认是垂直居中对齐  那么input标签外文字内容也是垂直居中 -->
    <input type="text">互动方式巨化股份还是

总结：对于 inline-block 元素来说，vertical-align
的主要作用并不是为了垂直居中该元素本身，而是为了调整该元素与其他内联元素（如文本或其他 inline 或 inline-block
元素）之间的垂直对齐方式。