美文网首页
ie8 不支持margin:0 auto,怎么实现居中

ie8 不支持margin:0 auto,怎么实现居中

作者: _信仰zmh | 来源:发表于2018-04-19 21:10 被阅读15次

    现代主流浏览器,都支持margin:0 auto;,这样元素就可以实现居中显示。

    但是ie8并不支持,这个属性,导致其它浏览器正常,但是ie8得就靠左显示。

    怎么兼容ie8 居中

    原理: 这其实是inline-block水平居中方案以及table-cell垂直居中方案的合用,也算是把文本排版的特性都利用了个遍了。

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .parent {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
                
                .child {
                    display: inline-block;
                }
            </style>
        </head>
    
        <body>
            <div class="parent">
                <div class="child">DEMO</div>
            </div>
        </body>
    
    </html>
    
    

    相关文章

      网友评论

          本文标题:ie8 不支持margin:0 auto,怎么实现居中

          本文链接:https://www.haomeiwen.com/subject/ewegkftx.html