.wrap为什么要先左浮动再position:relative?

来源:15-7 水平居中总结-不定宽块状元素方法(三)

云织

2016-12-23 17:55

.wrap为什么要先左浮动再position:relative?

写回答 关注

5回答

  • 慕粉201706335
    2017-02-09 14:52:14

    设置wrap浮动是为了脱离其他块状元素的空间限制变成独立元素,这样设置wrap的left的50%,是以整个body(浏览器窗体)为参考向左移动了百分之50(但是这时候这个wrap的div并不是居中的,准确来说整个页面的居中线是在这个wrap的左边框线上)。而此时wrap-center是处于wrap窗体(父元素)的中心(居中状态),相对父元素(大小百分比)移动50%正好移动到父元素的左边框线上(即上面说的页面中心线)。

  • kagaya
    2017-01-18 11:49:45

    同问为什么要设置浮动

  • chage0527
    2017-01-10 14:49:24

    .wrap{
        float:left;
        position:relative;
        left:50%;
    }
    .wrap-center{
        background:#ccc;
        position:relative;
        left:-50%;
    }
    首先让 class 为 wrap 的div浮动,并设置  position:relative; left:50%; 让其最左侧同其父元素(我的理解就是body)的水平方向的平分线对齐,,然后设置 class 为 wrap-center 的div平分线与class 为 wrap 的div的最左侧对齐,这时class 为 wrap-center 的div就居中了。

    当然,因为是relative浮动,,所以列表会被盖住,你可以加margin-top或者br换行避免盖住。

  • qq_浮雲遊子_03977413
    2017-01-07 14:46:32

    同求,水平居中的这里将的太模糊了 

  • 慕粉1635292210
    2016-12-24 16:55:38

    没看懂

初识HTML(5)+CSS(3)

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1231780 学习 · 19087 问题

查看课程

相似问题