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

時間 2019-11-12

標籤關於元素垂直居中對齊简体版

原文原文鏈接

　　在製做一個頁面的過程當中，須要將處於同一個父div中的兩個高度不同的input進行垂直居中對齊。編寫時在FF下查看默認就是對齊的，而到了IE6下二者卻出現了錯位。猶記得有個vertical-align屬性能夠用來進行垂直對齊，礙於前端經驗較少，故在網上搜索該屬性的用法。後在一個知名的web技術教程網站中看到對於該屬性的以下解釋：「將此元素（應用本屬性的元素）垂直放置在父元素的中部」。從表面意思來看，彷佛該屬性與父元素的關係十分密切，只要應用就可讓元素垂直居中對齊於父元素。但在實際應用中我卻發現，即便應用了該屬性後也並不能實現FF那種垂直居中對齊的效果。後經試驗證明，這個垂直居中對齊其實並非針對父元素來居中的，其是相對於此元素緊鄰的另外一個行內元素而言的。舉個栗子：html

<!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屬性，也仍舊沒法將其垂直居中於父元素的中部。web

　　此問題已解，再將話題延伸一下。當vartical-align設定爲「baseline」，也就是默認值時（又至關於沒有顯式設定vertical-align），FF、IE六、IE8和IE11的表現也是不同的。FF和IE11會自動將二者相對垂直居中對齊，而不管父元素的高度是多少。這種垂直居中對齊效果每每就是咱們想要的。IE6會將矮元素的底部與高元素的底部對齊，IE8則會將矮元素頂部與高元素的頂部對齊，這樣在高度不一的狀況下便造成了「錯位」。也正是由於瀏覽器這種對於「默認值的默認處理方式」，才形成了在不一樣瀏覽器下顯示效果的不一致。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。