您的位置：首页 > 其它

定位盒子居中问题的解决

2018-03-23 19:37 260 查看

000 定位盒子居中问题

如果想做成顺丰首页的样子，如下图所示：

父Div相对子Div绝对

子Div样式中left:50%;margin-left:-(父宽度/2)

Markdown及扩展

div包含所有的标签；p标签不包换div,h1等标签> [zpp ]

代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>顺丰定位盒子居中</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.banner{
position: relative; //父亲相对定位
margin: 0 auto;
width: 1259px;
height: 472px;
}
.search{
position: absolute;  //子绝对定位
width: 960px;
height: 60px;
background: #333;
bottom: 0;
left: 50%;    //往左
margin-left: -480px;  //左间距 父盒子宽度的一半
}
.search ul li{
float: left;
}
.search ul li a{
display: inline-block;
width:160px;
height: 60px;;
text-decoration: none;
color: #FFFFFF;
line-height: 60px;
text-align: center;
}
.sj{
position: absolute;
left:220px;
bottom:48px;
z-index: 10;
}
.login{
position: absolute;
left:149px;
bottom:56px;
z-index:10;
}
</style>
</head>
<body>
<div class="banner">
<img src="img/sf.png">
<div class="search">
<ul>
<li><a href="javascript:void(0)">运单查询</a></li>
<li><a href="javascript:void(0)">运费查询</a></li>
<li><a href="javascript:void(0)">时效查询</a></li>
<li><a href="javascript:void(0)">服务网点查询</a></li>
<li><a href="javascript:void(0)">收送范围查询</a></li>
<li><a href="javascript:void(0)">客户专区</a></li>
</ul>
</div>
<div class="sj"><img src="img/4.png"></div>
<div class="login"><img src="img/3.png"></div>
</div>
</body>
</html>

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航