html中float居中对齐,css使用float怎么居中？

admin管理员组

文章数量:1794759

html中float居中对齐,css使用float怎么居中？

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答疑栏目，欢迎学习！

本文标签： htmlFloatcss