css中可以实现float:left;左浮,想居中怎么办

css中可以用float:left;左浮,float:left;右浮。我想让它在中间怎么办,查了下没有float:center,该怎么办现在是这样,想让它这样... css中可以用float:left;左浮,float:left;右浮。我想让它在中间怎么办,查了下没有float:center,该怎么办

现在是这样,想让它这样
展开
 我来答
百度网友87c3808
2018-03-30 · TA获得超过1.1万个赞
知道小有建树答主
回答量:50
采纳率:100%
帮助的人:7106
展开全部

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    }    

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

ka819501008
2014-01-21 · TA获得超过1215个赞
知道大有可为答主
回答量:1723
采纳率:0%
帮助的人:901万
展开全部
margin:0 auto;
意思是上下距离为0;左右为自动,这样就居中了。
更多追问追答
追问
盒子指的是橙色那层吗?
追答
对,你橙色那层需要定义宽度才行。
也可以不定宽度,直接在外层的灰色块里定义text-align:center;
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lee_zim
2014-01-21 · TA获得超过433个赞
知道小有建树答主
回答量:381
采纳率:0%
帮助的人:225万
展开全部
对某个盒子,添加margin:0 auto;就可以居中
追问
盒子指的是橙色那层吗?
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
张123___
2019-11-08
知道答主
回答量:7
采纳率:0%
帮助的人:3.7万
展开全部
是的。我用了楼上的方法,可以的。设置:margin:0 auto;就可以了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式