關於行內元素的垂直居中對齊


  在制作一個頁面的過程中,需要將處於同一個父div中的兩個高度不一樣的input進行垂直居中對齊。編寫時在FF下查看默認就是對齊的,而到了IE6下兩者卻出現了錯位。猶記得有個vertical-align屬性可以用來進行垂直對齊,礙於前端經驗較少,故在網上搜索該屬性的用法。后在一個知名的web技術教程網站中看到對於該屬性的如下解釋:“將此元素(應用本屬性的元素)垂直放置在父元素的中部”。從表面意思來看,似乎該屬性與父元素的關系十分密切,只要應用就可以讓元素垂直居中對齊於父元素。但在實際應用中我卻發現,即使應用了該屬性后也並不能實現FF那種垂直居中對齊的效果。后經試驗證實,這個垂直居中對齊其實並不是針對父元素來居中的,其是相對於此元素緊鄰的另一個行內元素而言的。舉個栗子:

 

<!doctype html>
<html>
    <head>
        <style>

        *{margin:0;padding:0;}

            div{
                width:300px;
                height:200px;
                border:1px solid blue;
            }

            #s1{
                width:50px;
                height:100px;
                background-color:red;
                border:0;
            }

            #s2{
                width:50px;
                height:200px;
                background-color:pink;
                border:0;
            }
        </style>

        <script>
        </script>
    </head>

    <body>
        <div>
            <input type='text' id='s1' />
            <input type='text' id='s2' />
        </div>
    </body>
</html>

 

  父div中包含了兩個input,inp1的高度為100px,小於inp2的200px。我們分別為這兩個input應用vertical-align:middle。通過瀏覽器查看效果,發現兩者的垂直居中對齊似乎是居於父元素中部的。然后,我們將父元素div刪除掉,再刷新下頁面,發現兩者仍然是呈相互垂直居中對齊狀態的。可見,兩者的垂直居中對齊是基於彼此的,而並不是資料中顯示的“置於父元素的中部”,可以說和父元素就沒有什么關系。而且,要想實現這種效果,兩者必須同時設置vertical-align屬性為“middle”,否則也是不起作用的。

  再有一種情況也可以證明其垂直居中對齊與父元素的無關性:比如在父元素僅包含一個子元素的情況下,即使子元素應用了這個middle屬性,也仍舊無法將其垂直居中於父元素的中部。

  此問題已解,再將話題延伸一下。當vartical-align設定為“baseline”,也就是默認值時(又相當於沒有顯式設定vertical-align),FF、IE6、IE8和IE11的表現也是不一樣的。FF和IE11會自動將兩者相對垂直居中對齊,而無論父元素的高度是多少。這種垂直居中對齊效果往往就是我們想要的。IE6會將矮元素的底部與高元素的底部對齊,IE8則會將矮元素頂部與高元素的頂部對齊,這樣在高度不一的情況下便形成了“錯位”。也正是因為瀏覽器這種對於“默認值的默認處理方式”,才造成了在不同瀏覽器下顯示效果的不一致。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM