最近在做项目开发时用到 , flex 布局 ,在华为手机的uc 浏览器中出现兼容性问题 ,解决方案如下,并提供
一种垂直水平居中的方式,希望能给各位在移动端开发时带来便利,应用导航,左图右文
父容器啊设置属性:
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: red;
/*--------此处让ul包裹内容,给上下padding 值 要比给定值高度更好 --*/
padding: 10px 0;
-webkit-box-flex: 1;
display: -webkit-flex;
display: flex;
子元素属性如下
-webkit-flex:1;
-webkit-box-flex: 1;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flexdemo</title>
<style type="text/css">
.container{
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: red;
/*---------------------------------此处让ul包裹内容,给上下padding 值 要比给定值高度更好 ----------------------------------------*/
padding: 10px 0;
-webkit-box-flex: 1;
display: -webkit-flex;
display: flex;
}
li{
list-style: none;
-webkit-flex:1;
-webkit-box-flex: 1;
flex: 1;
border-right: 1px solid gray;
text-align: center;
}
</style>
</head>
<!-- box-sizing:border -->
<body>
<ul class="container">
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
</ul>
</body>
</html>
效果 :