关于行内元素的垂直居中对齐

  在制作一个页面的过程中,需要将处于同一个父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则会将矮元素顶部与高元素的顶部对齐,这样在高度不一的情况下便形成了“错位”。也正是因为浏览器这种对于“默认值的默认处理方式”,才造成了在不同浏览器下显示效果的不一致。

你可能感兴趣的:(垂直居中)