vertical-align 垂直对齐

一、垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

<img src="assets/xian.jpg" />

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， **通常用来控制图片/表单与文字的对齐**。

<style>

    .box{

        width: 300px;

        height: 30px;

        background: pink;

        font-size:12px;

        line-height: 30px;

    }

    img{

        vertical-align: middle;

    }

</style>

<div class="box">

    <img src="images/ico_phone.png" alt="">

    手机

</div>