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

使不定宽块状元素水平居中-第三种方法

使不定宽块状元素水平居中-第三种方法

老王哥哥 2016-07-30 15:53:07
使不定宽块状元素水平居中-第三种方法方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。 代码如下:</head>    <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;                }     </style></head><body>     <div>             <ul>                     <li><a href="#">1</a></li>                     <li><a href="#">2</a></li>                     <li><a href="#">3</a></li>             </ul>     </div> </body>我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。完全懵了。有谁能帮帮我??尤其是读了这段话之后,我的脑袋都转不动了。。
查看完整描述

4 回答

?
qyy2499760117_叶子

TA贡献188条经验 获得超91个赞

你就记住一人一边就得了。

查看完整回答
1 反对 回复 2016-08-01
?
随风逐流

TA贡献5条经验 获得超4个赞

ul移到了中间 ul的最左端和父容器中线对齐 这时由于ul有宽度,所以整体是偏右的,偏了一半的ul的宽度li往左回移一半的宽度,平分线到了正中间的位置,也就是 “ul的最左端”

以后又不懂得,可以先关注我。和我私聊也是可以的!尽量帮你解决问题。

查看完整回答
1 反对 回复 2016-08-01
?
人笨嫌刀钝

TA贡献100条经验 获得超24个赞

ul移到了中间 ul的最左端和父容器中线对齐 这时由于ul有宽度,所以整体是偏右的,偏了一半的ul的宽度


li往左回移一半的宽度,平分线到了正中间的位置,也就是 “ul的最左端”

查看完整回答
反对 回复 2016-07-30
  • 4 回答
  • 0 关注
  • 1405 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信