css:理解vertical-align

一、vertical-align的定義：

（1）vertical-align 屬性用於定義“周圍的文字、inline 元素以及 inline-block 元素”相 對於該元素基線的垂直對齊方式。這裡的“該元素”指的是被定義了 vertical-align 屬性的 元素。

（2）vertical-align 屬性對 inline 元素、inline-block 元素和 table-cell 元素有效， 對塊 元素無效。

（3）在表格單元格中，vertical-align 屬性可以定義單元格td 元素中內容的對齊方式。 td 元素是 table-cell 元素，也就是說 vertical-align 屬性對 table-cell 型別元素有效。

（4）vertical-align 屬性允許指定負長度值（如 -2px）和百分比值（如 50%）。

二、vertical-align的應用

1.圖片與文字的對齊

example:

     <div>
    text.<img src="timg.jpg" id="img1"/>text（top）.
    </div>
    <div>
    text.<img src="timg.jpg" id="img2"/>text（middle）.
    </div>
    <div>
    text.<img
 
 src="timg.jpg" id="img3"/>text（baseline）.
    </div>
    <div>
    text.<img src="timg.jpg" id="img4"/>text（bottom）.
    </div>

    #img1{
        vertical-align: top;
    }               
    #img2{
        vertical-align: middle;
    }    
    #img3{
        vertical-align
 
: baseline;
    }    
    #img4{
        vertical-align: bottom;
    } 

效果：

2.表單欄位的對齊

demo:

     <form>
        <input type="radio" value="女士" name="gender" class="radio-layout"/>女士
        <input type="radio" value="男士" name="gender" class="radio-layout"/>男士   
        <input type="checkbox" name="hobby" value="football" class="checkbox-layout"/>足球
        <input type="checkbox" name="hobby" value="basketball" class="checkbox-layout"/>籃球
     </form>

	.radio-layout,.checkbox-layout{
            vertical-align:-1px;/*元素相對於基線向下偏移1px;*/
            /*vertical-align: 1px;元素相對於基線向上偏移1px;*/
        }

效果：

3.table-cell內部元素的垂直居中

example:

    <div>
        <img src="timg.jpg"/>
    </div>

    div{
            width:200px;
            height:200px;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
            border:1px solid silver;
        }

效果：

三、總結：

1.vertical-align屬性的作用範圍：一是文字，inline，inline-block元素之間的對齊，二是table-cell內部的元素的對齊方式。

2.vertical-align屬性對塊元素不起作用。

3.vertical-align的應用：圖片、文字的對齊；垂直居中；表單欄位的對齊。