css3 box-pack box-align 居中

来源：互联网发布：vmware for mac下载编辑：程序博客网时间：2024/06/05 09:39

最近在h5页面开发中遇到了dispaly：box；这样的布局，所以总结了一下

原来水平垂直居中写法为：height=line-height 实现垂直居中 text-align 实现水平居中

现在使用 box-align 实现垂直居中 box-pack 实现水平居中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .demo1 {            width: 200px;            height: 200px;            border: 1px solid #2195de;            text-align: center;            line-height: 200px;        }        .demo2 {            width: 200px;            height: 200px;            border: 1px solid #2195de;            display: -webkit-box;            -webkit-box-align: center;            -webkit-box-pack: center;        }    </style></head><body><div class="demo1">    <input type="text" placeholder="坚持着"></div><div class="demo2">    <input type="text" placeholder="努力着"></div></body></html>

如下图

阅读全文

0 0