vertical-align: middle的用法

在開發前端網頁的過程中，水平居中有text-align:center和margin：0 auto。但是垂直居中始終沒有一個比較好的解決方案，css中的vertical-align是垂直居中的意思，但是使用起來讓人很難以理解 。

vertical-align在css中有着豐富的屬性，是我見過爲數不多的，今天着重研究vertical-align: middle的用法，其他屬性基本與此同理。

1. 首先從定義上
   
   • 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
   • middle:把此元素放置在父元素的中部。
   • 定義就讓人很難以理解，讀來讀去饒了幾遍，但是middle的意思看起來又如此簡單。
2. 錯誤代碼

<div class="big">
    <span class="small">dsada</span>
</div>
<style>
        .big{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            /*vertical-align: middle;*/
        }
        .small{
            /*vertical-align: middle;*/
            /*display: inline-block;*/
        }
    </style>

我首先把vertical-align: middle放到父元素中（text-align:center的用法），然後我放到子元素中（margin:0 auto用法），隨後我把span變成行內塊級元素，但是結果都沒有用。

3.正確代碼

<div class="big">
    <span class="small">
        <span class="small-two">大聲道</span>
        <span class="small-one">之前的</span>
    </span>
</div>
<style>
        .big{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            /*vertical-align: middle;*/
        }
        .small{
            background-color: #000;
            color: red;
        }
        .small-one{
            line-height: 200px;
        }
        .small-two{
            vertical-align: middle;
        }   
    </style>

就是說我們在想讓small-two垂直居中時，必須在定義一個同級的行內元素，讓目標元素找到基線，這個裏面的middle可能相比line-height看不出效果，如果換成bottom、text-top等就看一看出很明顯的效果。
4.如何讓圖片垂直居中

<div class="big">
    <span class="small">
        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" height="200" width="200"/>
        <span class="text">打我手機看山東</span>
    </span>
</div>
<style>
        .big{
            width: 500px;
            height: 400px;
            background-color: yellow;
            margin: 500px auto;
        }
        .small{
            font-size: 18px;
            background-color: #000;
            color: #ffffff;
        }
        img{
            vertical-align: middle;
        }
        .text{
            background: green;
            width: 200px;
            margin-left: 20px;
            line-height: 400px;
        }
    </style>