1、vertical-align基本認識

　　支持的屬性值：

　　　　①線類：baseline（默認），top，middle，bottom

　　　　②文本類：text-top，text-bottom

　　　　③上標下標類：sub，super

　　　　④數值百分比類：

　　　　　　數值和百分比的共性：ⅰ都帶數字；ⅱ都支持負值；ⅲ行為表現一致（都是在baseline基礎上上下偏移數值大小，百分比類以line-height計算，IE6/IE7下vertical-align百分比值不支持小數line-height）。

2、vertical-align起作用的前提

　　應用于inline水平以及“table-cell“元素。

　　默認狀態下支持vertical-align的元素：圖片、按鈕、文字和單元格。

　　table-cell的vertical-align只會作用在自身，對子元素設置vertical-align是沒有意義的：

　　

3、vertical-align與line-height

　　流式布局多余的空白處理：

　　

?4、vertical-align底線、頂線、中線的行為表現

　　vertical-align:bottom

　　　　定義：①inline/inline-block元素：元素底部和整行的底部對齊；②table-cell元素：單元格padding邊緣和表格行的底部對齊

　　　　

　　　　

　　vertical-align:top

　　　　定義：①inline/inline-block元素：元素頂部和整行的頂部對齊；②table-cell元素：單元格頂padding邊緣和表格行的頂部對齊。

　　　　

　　　　

　　vertical-align:middle

　　　　定義：①inline/inline-block元素：元素的垂直中心點和父元素基線往上1/2x-height處對齊；②table-cell元素：單元格填充盒子相對于外面的表格行居中對齊。

　　　　

　　　　inline/inline-block元素如果單純的設置middle，由于文字的下沉特性，圖片只能夠近似垂直居中，如果想要完全垂直居中，font-size需要設置為0。

　　　　

5、說說vertical-align:text-top/text-bottom

?　　定義：盒子的頂部/底部和父級content area的頂部/底部對齊。?

　　

　　注：vertical-align僅與父級的font-size有關。

　　應用環境：

　　　　

6、深入理解vertical-align:sub/super

　　html中<sup>和<sub>功效相同，同時字體也會略微縮小，是原字號的75%大小。

　　定義：提高/降低盒子的基線到父級合適的上/下標基線位置。

7、vertical-align前后不一的行為機制

　　應用：

　　

　　注：關注當前元素和父級，前后并沒有直接影響。

8、vertical-align糟糕的兼容性

　　chrome和IE7下就有明顯的不同。

　　原因：①IE7下圖文一體；②middle的解釋有問題

　　解決方案：

　　使用inline-block破壞圖文一體；

?

9、vertical-align的實際應用

　　⑴小圖標和文字的對齊

　　使用vertical-align負值沒有兼容性差異。

　　

　　⑵不定尺寸圖片或多行文字的垂直居中：①主體元素inline-block化；②0寬度100%高度輔助元素；③vertical-align：middle

　　

　　

?

轉載于:https://www.cnblogs.com/tinyTea/p/7218651.html

總結

以上是生活随笔為你收集整理的CSS深入理解学习笔记之vertical-align的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。