您的位置：首页 > 其它

内嵌盒子定位和居中问题，在缩放浏览器情况下，不会影响盒子的布局

2016-01-16 17:05 134 查看

问题描述：第一眼我们看到上图，可能就想到用浮动来布局，但是在用浏览器调试缩放时“您好中国”盒子会自然成列。那么怎么让他们自适应，让好和中之间始终处于浏览器中间位置？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
height: 150px;
background: gray;
margin-top: 20px;
position: relative;
}
.same{
width: 300px;
height: 120px;
top: 15px;
left: 50%;
position: absolute;
text-align: center;
line-height: 120px;
font-size: 30px;
}
.one{
background-color: yellow;
margin-left: -600px;
}
.two{
background-color: blue;
margin-left: -300px;
}
.three{
background-color: green;
}
.four{
background-color: pink;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="main">
<span class="same one">您</span>
<span class="same two">好</span>
<span class="same three">中</span>
<span class="same four">国</span>
</div>
</body>
</html>


本案例应用到知识点：相对定位、绝对定位；盒子的居中
现在就居中问题做下总结：

1、左右居中：

给盒子absolute定位，父盒子relative，left=50%；让盒子移动， Margin-left: -自身宽度一半。

2、垂直居中：

给盒子absolute定位，父盒子relative，top=50%；让盒子移动， Margin-top: -自身高度一半。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航