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

答案是什么?

这个class为wrap-center的div怎么设置水平居中?

正在回答

3 回答

.wrap{
    float:left;
    position:relative;
    left:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;    
}
<body>
<div class="container">
<ul>
    <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<br/>   <!-- 这边加了换行,不然上面的列表会被盖住  -->
<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>

不知道这个答案对不对

0 回复 有任何疑惑可以回复我~
.wrap{
    float:left;
    position:relative;
    left:50%;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;    
}

先设置父层,再设置本层

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

许毅松

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中
2016-12-19 回复 有任何疑惑可以回复我~

position-relative,设置百分比,同样也可以,试试,这个比较好理解一点

相对于自己来设置的位置,这样子比较好用。

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

qq_熊猫先生_0

如果是行内元素,用这个也行text-align:center
2016-12-18 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)
  • 参与学习       1231930    人
  • 解答问题       19087    个

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

进入课程

答案是什么?

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

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

帮助反馈 APP下载

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

公众号

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