移動端利用-webkit-box水平垂直居中(舊彈性盒)

本文轉載自查看原文 2017-03-25 14:13 3759 前端

新彈性盒水平垂直居中參考:http://www.cnblogs.com/ooo0/p/7562884.html

新舊彈性盒樣式參考:http://www.cnblogs.com/ooo0/p/7562906.html

移動端利用-webkit-box水平垂直居中

-webkit-box的屬性：
-webkit-box-orient(父):horizontal在水平行中從左向右排列子元素；vertical從上向下垂直排列子元素。
-webkit-box-pack(父):start水平居左對齊；end水平居右對齊；center水平居中；justify兩端對齊。
-webkit-box-align(父):start居頂對齊；end居底對齊；center垂直居中；stretch拉伸到與父容器等高。
-webkit-box-flex(子):用來讓子容器針對父容器的寬度按一定規則進行划分。

代碼:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="../../flex.css" rel="stylesheet" />
        <style type="text/css">
            .outer {
                height: 200px;
                border: 1px #F2DEDE solid;
            }
            
            .flex {
                display: box; /*舊彈性盒布局*/
            }
            
            .ai-c {
                -webkit-box-align: center;/*水平居中*/
            }
            
            .jc-c {
                -webkit-box-pack: center; /*垂直居中*/
            }
            
        </style>
    </head>

    <body>

        <div class="outer flex ai-c jc-c">
            <div class="inner" style="background: #DFF0D8;width:40px;height:50px;">left</div>
            <div class="inner" style="background: #D9EDF7;width:60px;height:80px;">middle</div>
            <div class="inner" style="background: #FCF8E3;width:40px;height:50px;">right</div>
        </div>

    </body>

</html>

效果:

參考地址:

http://www.cnblogs.com/mywaystrech/p/4849260.html

免責聲明！

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

猜您在找 移動端利用-webkit-box水平垂直居中彈性盒布局水平垂直居中(新彈性盒) 彈性盒子布局水平垂直居中盒模型display:-webkit-box;(轉) html css 圖片居中(水平居中和垂直居中)，移動端圖片預覽移動web開發實踐-css3（1）盒模型display:-webkit-box;的使用移動端常見問題（水平居中和垂直居中）盒模型水平垂直居中方法 -水平居中、垂直居中、水平垂直居中 React Native 中的 Flex Box 的用法（水平布局、垂直布局、水平居中、垂直居中、居中布局）