要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。
具体示例:
HTML代码
CSS样例
.clearfix:after{
content:'';
visibility:hidden;
font-size:0;
height:0;
display:block;
clear:both;
}
.container{
width:100%;
text-align:center;
}
ul{
display:inline-block;
}
li{
float:left;
width:20px;
height:20px;
margin:0 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
cursor:pointer;
}
a{
display:block;
background-color:#000;
}
实现思想是,先让ul定义 display:inline-block 属性,让其变成行内块级元素。 当ul成为行内块级元素后,它便有了行级元素的特性。 那么,重点来了。 只需要对ul的父级元素定义一个text-align:center; 效果便可以很明显的看到了。 更重点是,ul内的li的增减并不会对其位置造成偏移。