css深入理解vertical-align的詳細介紹

第一講：vertical-align家族基本認識

瞭解vertical-align支援的屬性值以及組成

屬性：

1.inherit

2.線類

baseline,top,middle,bottom

3.文本類

text-top,text-bottom

4.上標下標類

sub,super

5數值百分比類

20px,2em,20%

共性 都帶數值 20px 20em 20%，都支援負值 margin,letter-spacing word-spacing vertical-align，行為表現一致 在baseline對齊基礎上上下位移對應數值大小

百分比類的差異

vertical-align的百分比值是相對於line-height計算的。

第二講vertical-align起作用的前提

探討各種display值對vertical-align的影響

vertical-align起作用是有條件的，應用於inline水平以及table-cell元素

inline水平的元素

img span strong em

inline-block input

table-cell元素

.table-cell:<td>

預設狀態下：圖片，按鈕，文字，和儲存格

1.display：更改元素的顯示水平

2.css聲明更改元素的顯示水平

在一個P標籤中的img標籤 設定了vertical-align:middle 圖片不置中

不是vertical-align沒起作用，而是太短，不夠置中

實戰：多行文字與圖片垂直置中

<p class="test-list">

<span>文字</span>

<img src="test.jpg"/>

</p>

.test-list {text-align:justify}

.test-list > span{ display:inline-block; width:210px; vertical-align:middle }

.test-list > img{vertical-align:middle;}

第三講 vertical-align 與 ling-height

vertical-align百分比是相對於line-height值計算的

{

line-height:30px;

vertical-align:-10%;

}相當於vertical-align=-3px

內聯圖片裡面下邊出現了空白，解決方案去掉行高，或者改變vertical-align屬性bottom,top,middle都可以

基本現象衍生：垂直置中

vertical-align:middle;line-height:36px;

設定標籤應用比圖片大的行高，圖片就近似垂直置中了。

第四回 vertical-align線類屬性值深入理解

底線，頂線，中線的行為表現

vertical-align:bottom

1.inline/inline-block元素：元素底部和整行的底部對齊

2.table-cell元素：儲存格底padding邊緣和表格行底部對齊

vertical-align:top

vertical-middle

1.inline/inline-block元素：元素的垂直中心點和父元素基準上1/2 x-height處對齊

2.table-cell元素：儲存格填補值盒子相對於外面的表格行置中對齊。

近似垂直置中

完全垂直置中：設定font-size:0

第五回 深入理解vertical-align文本類屬性值

vertical-align:text-top/text-bottom

定義

1.vertical-algin:text-top

盒子的頂部和父級centent-area的頂部對齊

2.vertical-align:text-bottom

盒子的底部和父級content area的底部對齊

1.元素vertical-align垂直對齊的位置與前後的元素都沒有關係；

2.元素vertical-align垂直對齊的位置與行高line-height沒有關係，至於字型大小與font-size有關

實際作用

表情圖片與文字的對齊效果 圖片（16x16）

使用基準的問題在於表徵圖偏上

使用頂線/底線的問題在於受其他內嵌元素影響，造成巨大定位偏差

使用中線也是不錯的選擇，單需要恰好的字型大小以及相容性要求不高

使用文本底部較合適不受行高以及其他內嵌元素影響；

第六回 vertical-align上標下標類

1.html中的上標 <sup>

2.html中的下標 <sub>

變小的是原來字型的75%大小

1.<sup> -->vertical-align:super

2.<sub> -->vertical-align:sub

定義

1.vertical-align:super

提高盒子的基準到父級合適的上標基準位置。

2.vertical-align:sub

降低盒子的基準到父級合適的下標基準位置。

實際應用

第七回：vertical-align前後不一的作用機制

相鄰元素不同vertical-align的行為表現

當出現前後不一致的時候

關注當前元素和父級，

前後並沒有直接影響

第八回 vertical-align糟糕的相容性

IE6/7

firefox/chrome