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

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

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

##         

##                   2.線類

                            baseline,top,middle,bottom

                   3.文本類

                            text-top,text-bottom

                   4.上標下標

                           ##                            20px,2em,20%

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

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

第二講vertical-align作用的前提

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

         於inline水準以及table-cell元素

                   inline水準的元素

      em

                  位於line-block input

         

#                           .,table-cell:                     1.display：已改變元素的顯示水準

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

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

                               文字

                          

                  

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

                   .test-list > img{vertical-align:middle;}##1 align百分比是相對於line-height值計算的

                   {

      0px;

                           且如. }相當於vertical-align=-3px

         內嵌圖片裡面下邊出現了空白，解決方法去除行高，或是改變vertical-align屬性bottom,top,middle ##o#   現像衍生：垂直居中

                   vertical-align:middle;line-height:36px;##  就近似垂直居中了。

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

                   底線，上排ign:bottom

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

                                    vertical-align: top

                  元素的垂直中心點與父元素基線上1/2 x-height處對準

                                      .table-cell元素：單元格填充盒子相對於外面的表格行居中對齊。

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

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

         vertical -align:text-top/text-bottom

         定義

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

                   2. 的-align:text-bottom

##移動。

                            盒子中盒子的底部與父級contentcontent area的底位對齊# #igno#          2.元素vertical-align垂直對齊的位置與行高line-height沒有關係，至於字體大小與font-size有關

         實際作用

          ##                   使用基準化的問題在於圖示為上

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

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

第六回標下標下標下標下標下符號

         1.html中的上標    

         2.html# 大小

         1.    ^{-->vertical-align:super}

##        

#                   1.vertical-align:super

         基線位置。

                  標基線位置。

         實際應用

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

        出現前後不一致的時候

                  注意與父級，而

      vertical-align糟糕的相容性

         IE6/7

         firefox/chrome

#

以上是css深入理解vertical-align的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！