浅谈vertical-align

1.vertical-align的应用点

- 应用于行内元素（包括行内块）

- 应用于表单元格（应用于单元格的时候只能识别baseline , top, middle , bottom）

- vertical-align 不影响块元素中的元素，也就是对块元素是无效的

- 可以影响表单格中的元素

2.vertical-align的运用

- 2-1 图像相对于文字的垂直对齐

效果如上图

需要设置的样式如下

<!-- html-->
    <div>
        sdfaasdf<img src="">klha
    </div>
           

/*css*/
    div{
        overflow: hidden;
        display: block;
    }
    div img{
        width: px;
        background: red;
        vertical-align: middle;
    }
           

这里的vertical-align应用于img，垂直居中生效，通过该例子，我们可以扩大一下思路

那就就是只要将元素设置display:inline-block，也可以垂直居中。

- 2-2 文本垂直对齐

<!-- html-->
    <div>
        <span>文本</span>
    </div>
           

/*css*/
    div{
        width: px;
        height: px;
        border: red solid px;
        display: table;
        text-align: center;
    }
    div span{
        display: table-cell;
        vertical-align: middle;
    }
           

这里的vertical-align应用于表单元格，父元素需要设置为display: table;

子元素需要设置为display: table-cell;

- 2-3 行内块元素垂直对齐

上面说了一个行内块元素相对于文字文本垂直居中，这里说一下行内块元素垂直居中

很多朋友可能试过在div中的行内块设置vertical-align:middle; 发现居然不生效，着实有些坑爹。

但是如果你想让块元素中的行内块垂直居中也不是不可能，方法有两种。

第一种：就像文本垂直居中一样：参考2-2

第二种：就是接下来说的

<!-- html-->
    <div>
        <div class="InlineBlock1"></div>
        <div class="InlineBlock2"></div>
    </div>
           

/*css*/
    div{
        width: px;
        height: px;
        background: yellow;
        text-align: center;
    }
    .InlineBlock1{
        display:inline-block;
        width: px;
        height: px;
        background: green;
        vertical-align: middle;
    }
    .InlineBlock2{
        width: px;
        height:%;
        display: inline-block;
        vertical-align: middle;
    }
           

效果如下

原理就在.InlineBlock2的样式上，设置高度为百分百，vertical-align: middle;这样就可以使旁边的绿色div有了可以有参考的对象，从而可以达到垂直居中的效果,然后把.InlineBlock2隐藏