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

水平居中-通过给父元素设置float没理解

有没有大神能给我讲讲啊。详细点

正在回答

2 回答

html代码:

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

css代码:

<style>
.container{    float:left;
   position:relative;
   left:50%}

/*简单的说这一步就是 让类名为container的div通过相对定位(position:relative;
   left:50%})使div向右偏移50%,实现div的左边框与整个页面的竖直的中心直线重合,并且通过浮动使div宽度和其子容器ul相近 */

.container ul{
   list-style:none;/*消除ul-li中li默认样式前面的小圆点*/
   margin:0;
   padding:0; /*使ul的上下左右四个方向的边界与div四个边界的距离为0,并且可以实现li中的2向中心线靠近*/   
   position:relative;
   left:-50%;}

/*这一步:利用相对定位(position:relative;left:-50%;)使ul向左偏移50%,使得ul的右边框与div的中心竖直线重合和ul的竖直中心线与整个页面的中心竖直线重合*/

效果图:http://img1.sycdn.imooc.com//5899b1dd0001d2d013580556.jpg


.container li{float:left;display:inline;margin-right:8px;}
</style>

/*最后一步:利用浮动和设置行状元素,使得里li标签中的内容水平居中分布,通过ul{padd'ing:0;和margin:0;},并且通过margin-right:8px;控制li标签中内容之间的间距*/

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

qq_安然_20

谢谢,非常详细呢,辛苦了(∩_∩)
2017-02-08 回复 有任何疑惑可以回复我~
#2

木子中心 提问者

非常感谢!我懂了。谢谢啊;
2017-02-08 回复 有任何疑惑可以回复我~
#3

hen_nam

为什么 float:left; 能使 div 的宽度和 ul 相近?
2017-02-12 回复 有任何疑惑可以回复我~
#4

元气满满来学习

“利用相对定位(position:relative;left:-50%;)使ul向左偏移50%” 你这里说的50%,是相对于div的50%还是相对于浏览器的50%; 正确应该是理解为相对于div的50%,但是为什么是相对于div的50%?
2017-02-22 回复 有任何疑惑可以回复我~
#5

用户1098335

可以,我好像懂了
2017-06-03 回复 有任何疑惑可以回复我~
查看2条回复

好好好好好好哦啊好

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

举报

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

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

进入课程

水平居中-通过给父元素设置float没理解

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信