ul列表在div中三种居中方式怎么弄啊
问老师，ul列表在div中三种居中方式怎么弄啊，谢谢
4 回答
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>淘宝搜索框</title>
<style type="text/css">
.test1,.test2,.test3{
height: 100px;
background-color: #ccc;
margin-top: 20px;
}
ul{
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
width: 360px;
}
ul li{
height: 20px;
width: 100px;
background-color: #00aaaa;
float: left;
margin-right: 20px;
text-align: center;
}
.test1 ul{
margin: 0 auto;
}
.test2{
position: relative;
}
.test2 ul{
position: absolute;
left: 0;
top: 50%;
transform:translate(0,-50%);
}
.test3{
position: relative;
}
.test3 ul{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="test1">
<ul>
<li>水平居中</li>
<li>水平居中</li>
<li>水平居中</li>
</ul>
</div>
<div class="test2">
<ul>
<li>垂直居中</li>
<li>垂直居中</li>
<li>垂直居中</li>
</ul>
</div>
<div class="test3">
<ul>
<li>水平垂直居中</li>
<li>水平垂直居中</li>
<li>水平垂直居中</li>
</ul>
</div>
</body>
</html>举报
0/150
提交
取消
