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

添加代码为任务区中的class为wrap-center的div设置水平居中?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
    float:left;
 position:relative;
 left:50%
}

.container ul{
 list-style:none;
 margin:0;
 padding:0;
 
 position:relative;
 left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}


/*下面是代码任务区*/

.wrap-center{
    background:#ccc;
   
   
}
</style>
</head>

<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>

<!--下面是代码任务区-->
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>

正在回答

2 回答

.wrap{left:50%;float:left;position:relative;}

.wrap-center{

    background:#ccc;

    position:relative;

     left:-50%;

    

    

}


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

父元素: <div class="wrap">

子元素   <div class="wrap-center">


.wrap{left:50%;}//*首先这把父元素带到页面的中间


但应该是因为文字有长度, 所以控制子元素再退回一些距离


所以.wrap-center{left:-50%;}


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

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1227372    人
  • 解答问题       18248    个

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

进入课程

添加代码为任务区中的class为wrap-center的div设置水平居中?

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

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

帮助反馈 APP下载

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

公众号

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