css中可以实现float:left;左浮,想居中怎么办
现在是这样,想让它这样 展开
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 }
虽然这样用有些麻烦,但对于一个优秀的前端设计师,这个技巧还是有必要掌握的哦。
意思是上下距离为0;左右为自动,这样就居中了。
盒子指的是橙色那层吗?
对,你橙色那层需要定义宽度才行。
也可以不定宽度,直接在外层的灰色块里定义text-align:center;
盒子指的是橙色那层吗?