你的位置:首页 > 网页设计

[网页设计]内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局


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

 

<!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: -自身高度一半。