移动端一般浏览器版本都比较高,所以可以大胆的使用flex布局,(flex布局参考css3的flex布局用法)演示代码如下:
CSS代码如下:
<style type=text/css>
.ui-flex {
display: -webkit-Box !important;
display: -webkit-flex !important;
display: -ms-flexBox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.ui-flex,.ui-flex *,.ui-flex :after,.ui-flex :before {
Box-sizing: border-Box
}
.ui-flex.justify-center {
-webkit-Box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.ui-flex.center {
-webkit-Box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-Box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
</style>
/*** 来自编程之家 jb51.cc (jb51.cc)***/
HTML代码:HTML代码如下:
<div class=ui-flex justify-center center style=border: green solid 1px; width: 500px; height: 200px;>
<div class=cell>
<img alt= src=https://www.baidu.com/img/baidu_jgylogo3.gif style= />
</div>
</div>
<!-- 来自 编程之家 jb51.cc (jb51.cc)-->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。