css怎么实现float:left;居中?

 我来答
百度网友87c3808
2018-01-21 · TA获得超过1.1万个赞
知道小有建树答主
回答量:50
采纳率:100%
帮助的人:7148
展开全部

CSS有float:left和float:right,但能否实现float:center呢?水平居中浮动,当然是可以的,这里将介绍你实现方法。以下面的Li列表为例,我们要实现中间LI的居中浮动:

1    <div id="macji">    

2    <ul class="macji-skin">    

3    <li>列表一</li>    

4    <li>列表二</li>    

5    <li>列表三</li>    

6    </ul>    

7    </div>    

我们需要先了解下position:relative属性,它是指left、right、top、bottom等中的偏移位置。我们可以让ul为position:relative;left:50%,再让li向左浮动,再让position:relative;right:50%(或者left:-50%),那么li就会向中间浮动一样居中了。不相信的可把下面的CSS定义结合上边的代码拷贝到HTML测试。

view source

01    #macji{    

02    position:relative;    

03    width:100%;    

04    height:80px;    

05    background-color:#eee;    

06    text-align:center;    

07    overflow:hidden;    

08    }    

09    #macji .macji-skin{    

10    float:left;    

11    position:relative;    

12    left:50%;    

13    }    

14    #macji .macji-skin li{    

15    position:relative;    

16    right:50%;    

17    float:left;    

18    margin:10px;    

19    padding:0 10px;    

20    border:solid 1px #000;    

21    line-height:60px;    

22    }    

虽然这样用有些麻烦,但对于一个优秀的前端设计师,这个技巧还是有必要掌握的哦。

书香学编程
2020-12-30 · 贡献了超过775个回答
知道答主
回答量:775
采纳率:25%
帮助的人:54.8万
展开全部

Vue实践-CSS样式position/display/float属性对比使用

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式