CSS进阶之行盒的垂直对齐

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐的元素设置CSS属性：vertical-align（设置在行盒上）

预设值

• middle： 中线对齐
• bottom： 底边对齐
• top： 顶边对齐
• text-top：文字顶边对齐
• text-bottom：文字底边对齐

<p>
        <input type="checkbox">
        <span>无对齐</span>
    </p>
    <p>
        <input style="vertical-align: middle;" type="checkbox">
        <span>vertical-align:middle</span>
    </p>
    <p>
        <input style="vertical-align: top;" type="checkbox">
        <span>vertical-align:top</span>
    </p>
    <p>
        <input style="vertical-align: bottom;" type="checkbox">
        <span>vertical-align:bottom</span>
    </p>
    <p>
        <input style="vertical-align: text-bottom;" type="checkbox">
        <span>vertical-align:text-bottom</span>
    </p>
    <p>
        <input style="vertical-align: text-top;" type="checkbox">
        <span>vertical-align:text-top</span>
    </p>

也可以设置数值调整；

图片的底部白边

图片的父元素是一个块盒，块盒的高度自动，图片底部和父元素底边之间往往会出现白边。

解决方法这里提供两种：

1. 将父元素的font-size设置为0
2. 将img元素设置为块盒