为了账号安全,请及时绑定邮箱和手机立即绑定

不懂!!!不定宽块状元素使用float水平居中

不是很懂这里的代码。为什么.wrap-center里面要有个position:relative;left:-50%。这两个属性的设置不明白。求高手详细解说下.wrap跟.wrap-center这两个选择器的设置意义,怎么理解。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.wrap{
    float:left;
    position:relative;
    left:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
}
</style>
</head>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>


正在回答

2 回答

.wrap是.wrap-center的父元素,首先float:left;将.wrap移到窗口最左端,left:50%;使它向右偏移一半,使左边与中分线对齐,此时.wrap-center下元素应与父元素同样左边与整个窗口中分线对齐,在此基础上让.wrap-center下元素相对父元素向左偏移50%就正好位于窗口正中了。要还不明白楼主画图比较容易理解。

0 回复 有任何疑惑可以回复我~
#1

qq_我叫红领巾_2

此方法只能相对于页面窗口居中吗? 能否给一个父元素 相对那个父元素居中?
2016-10-08 回复 有任何疑惑可以回复我~
#2

利木

有一个小问题,【float:left;将.wrap移到窗口最左端】为什么要先移动到最左端呢?(只写 position:relative; left:50%;不也可以把div class="wrap"这个块状元素的【左边】和父元素body的中分线对齐么?)
2017-01-11 回复 有任何疑惑可以回复我~

那就用相对定位,参见12-7层模型-相对定位

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

不懂!!!不定宽块状元素使用float水平居中

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号