本篇文章主要介绍了" css自适应宽度 多种方法实现宽度自适应的水平居中"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block可以使用text-align:center和display:inl...
当父元素和子元素都没有定义宽度的情况下实现水平居中：
display:inline-block
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。
HTML代码:
复制代码
代码如下:
CSS代码:
复制代码
代码如下:
.navbar {
text-align:center;
}
.navbar ul {
display:inline-block;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}
IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样
复制代码
代码如下:
.navbar ul {
*display:inline;
*zoom:1;
}
position:relative
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。
HTML代码:
复制代码
代码如下:
CSS代码:
复制代码
代码如下:
.navbar {
overflow:hidden;
}
.navbar > div {
position:relative;
left:50%;
float:left;
}
.navbar ul {
position:relative;
left:-50%;
float:left;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}
IE7下需要加入下列代码支持：
复制代码
代码如下:
.navbar {
position:relative;
}
display:table
如果向使用极少的标签实现，这个方法是个不错的选择。
HTML代码:
复制代码
代码如下:
