详解verticalalignment

一、含义

在前端开发中，vertical-alignment是一个很基础却容易被忽略的属性，严格意义上来说，这个属性并没有单独的设置方式，而是囊括在了display:inline-block、display:table-cell等多个属性之中。它控制的是元素在垂直方向上的位置。

二、display:inline-block

在使用display:inline-block模式下，vertical-align属性的取值对其所含所有子元素全部生效。vertical-align的默认值是baseline。baseline并不表示基线或底线的意思，而相对于有基线概念的元素来说，元素的最下端会与基线对齐，元素顶部则可能超过基线位置。

    <div style="display:inline-block; vertical-align: middle">
        <img src="example.jpg">
        <p style="display:inline-block">这是一段文字</p>
    </div>

在这个例子中，垂直对齐方式设为middle，子元素的位置就会在垂直正中央。

三、display:table-cell

在使用display:table-cell模式下，vertical-align属性的取值只对其所直接包含的文本子元素或行内子元素（没有被特a意化为块状或表格单元格）起作用。垂直方向上的空隙优先分配给顶部对齐的元素，其次是bottom对齐的元素，而middle则会均分两侧，导致元素的位置出现1像素的偏移。

    <div style="display: table; vertical-align: middle">
        <div style="display: table-cell">
            这是一段文字。
        </div>
        <div style="display: table-cell">
            这是一张图片。
            <img src="example.jpg">
        </div>
    </div>

在这个例子中，垂直对齐方式也被设为middle，子元素的位置会在容器中垂直正中央，在这之中，容器通过table元素来实现纵向分割的效果。

四、使用absolute + top/bottom + margin-top/margin-bottom

在容器元素上设置position:relative，同时，对要垂直居中的子元素分别使用top: 50%;和bottom: 50%；然后再通过margin-top和margin-bottom来微调垂直位置。

    <div style="position: relative; height: 200px;">
        <p style="position: absolute; top: 50%; margin-top: -10px;">这是一段文字</p>
    </div>

在这个例子中，需要购入position: relative来占据父容器位置，同时子元素使用position: absolute，继承父容器的top和bottom高度，通过margin-top的负值来对元素位置进行微调。

五、使用flexbox

使用flexbox布局来进行元素垂直方向上的对齐是十分方便的。通过将父容器设为display:flex;之后再通过align-items:center来实现子元素的垂直居中。

    <div style="display: flex; align-items:center;">
        <p>这是一段文字</p>
    </div>

在这个例子中，父容器使用display:flex来启用flexbox模式，子元素在默认情况下被继承了父容器的垂直居中样式。

总结

以上就是vertical-alignment在前端开发中的几种使用方式以及其原理，这个属性虽然看起来简单，但是理解得当却可以事半功倍。大家在使用这个属性的时候，需要注意一些细节方面的处理，并根据实际情况选择合适的方式。