CSS有float:left和float:right,但能否实现float:center呢?下面我们一起来看看。
css使用float怎么居中?
css并没有float:center,但是实现水平居中浮动是可以实现的。
以下面的Li列表为例,我们要实现中间LI的居中浮动:
- 列表一
- 列表二
- 列表三
我们需要先了解下position:relative属性,它是指left、right、top、bottom等中的偏移位置。
(相关课程推荐:css视频教程)
1、我们可以让ul为position:relative;left:50%,
2、再让li向左浮动
3、最后设置li position:relative;right:50%(或者left:-50%),那么li就会向中间浮动一样居中了#macji{
position:relative;
width:100%;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
position:relative;
right:50%;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
效果:
本文来自css3答疑栏目,欢迎学习!
更多推荐
html中float居中对齐,css使用float怎么居中?
发布评论