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

时间 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则会将矮元素顶部与高元素的顶部对齐，这样在高度不一的状况下便造成了“错位”。也正是由于浏览器这种对于“默认值的默认处理方式”，才形成了在不一样浏览器下显示效果的不一致。浏览器