div垂直居中于父容器 box-pack 属性和box-align属性控制-阿里云开发者社区

div垂直居中于父容器 box-pack 属性和box-align属性控制

2017-11-22 939

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器服务 Serverless 版 ACK Serverless，317元额度多规格

容器服务 Serverless 版 ACK Serverless，952元额度多规格

容器镜像服务 ACR，镜像仓库100个不限时长

简介：

 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       
        <html xmlns="http://www.w3.org/1999/xhtml">
       
        <head>
       
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
       
        <title></title>
       
        <style type="text/css">
       
        div#container {
       
            display: -moz-box;
       
            display: -webkit-box;
       
            -moz-box-align: center;
       
            -webkit-box-align: center;
       
            -moz-box-pack: center;
       
            -webkit-box-pack: center;
       
            width: 300px;
       
            height: 200px;
       
            background-color: pink;
       
        }
       
        #text-a { background-color: orange; }
       
        #text-b { background-color: yellow; }
       
        #text-c { background-color: limegreen; }
       
        </style>
       
        </head>
       
        <body>
       
        <div id="container">
       
            <div id="text-a">列1</div>
       
            <div id="text-b">列2</div>
       
            <div id="text-c">列3</div>
       
        </div>
       
        </body>
       
        </html>
       
  本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1786343

div垂直居中于父容器 box-pack 属性和box-align属性控制

容器服务

热门文章

最新文章

相关课程

相关电子书

相关实验场景