css3--内容垂直居中，box-back属性

最新推荐文章于 2024-05-08 16:04:38 发布

sevenbblythelulu

最新推荐文章于 2024-05-08 16:04:38 发布

阅读量835

点赞数

分类专栏： little knowledge 成品文章标签： css3 box

本文链接：https://blog.csdn.net/sevenbblythelulu/article/details/46832787

版权

little knowledge 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

成品

4 篇文章 0 订阅

订阅专栏

      
      
       
       <!DOCTYPE html>
      
      
      
      
       
       <html>
      
      
      
      
       
       <head>
      
      
      
      
       
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      
      
      
      
       
       <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
      
      
      
      
       
       <meta name="format-detection" content="telephone=no">
      
      
      
      
       
       <title>垂直居中对齐</title>
      
      
      
      
       
       <style>
      
      
      
      
       
       .test_box {
      
      
      
      
       
           display: -moz-box; 
      
      
      
      
       
           display: -webkit-box;
      
      
      
      
       
           display: box; 
      
      
      
      
       
           width: 300px;
      
      
      
      
       
           height: 100px;
      
      
      
      
       
           -moz-box-align:center;-webkit-box-align:center;box-align:center;垂直居中
      
      
      
      
       
           background: #f0f3f9;
      
      
      
      
       
           -moz-box-pack:justify; -webkit-box-pack:justify;  box-pack:justify; 水平居中
      
      
      
      
       
        }
      
      
      
      

      
      
      
      
       
       </style>
      
      
      
      
       
       </head>
      
      
      
      
       
       <body>
      
      
      
      
       
       <div class="test_box">
      
      
      
      
       
           <p>123</p>
      
      
      
      
       
           <p>123</p>
      
      
      
      
       
       </div>
      
      
      
      
       
       </body>
      
      
      
      
       
       </html>
      
      
      
      

      
      
      
      

      
      
      
      
       
       Justify：火狐不兼容，谷歌可以（使用这个属性值，内容标签至少两个）
      
      
      
      
       
       start end  center 属性值 都可以兼容

sevenbblythelulu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3--内容垂直居中，box-back属性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 垂直居中对齐.test_box { display: -moz-box; display: -webkit-box; d
复制链接

扫一扫