首页 >web前端 >html教程 >内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose

内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:29:241589浏览

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

 

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

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn