html自适应宽度居中,css自适应宽度多种方法实现宽度自适应的水平居中-优快云博客

当父元素和子元素都没有定义宽度的情况下实现水平居中：

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代码:

复制代码代码如下:

…

CSS代码:

复制代码代码如下:

.navbar {

display:table;

margin:0 auto;

}

.navbar li {

display:table-cell;

}

.navbar li + li {

padding-left:20px;

}

不支持IE7及一下浏览器，其他的主流浏览器都支持。

display:inline-flex

这个方法需要使用 flex-layout 的知识。

HTML代码:

复制代码代码如下:

CSS代码:

复制代码代码如下:

.navbar {

text-align:center;

}

.navbar > ul {

display:-webkit-inline-box;

display:-moz-inline-box;

display:-ms-inline-flexbox;

display:-webkit-inline-flex;

display:inline-flex;

}

.navbar li + li {

margin-left:20px;

}

使用CSS fit-content 值

下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。

HTML代码:

复制代码代码如下:

CSS代码:

复制代码代码如下:

.center ul{

width: -moz-fit-content;

width: -webkit-fit-content;

width: fit-content;

margin: auto;

}

浏览器支持度较低只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。

这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。

根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。

演示

html自适应宽度居中,css自适应宽度 多种方法实现宽度自适应的水平居中

html自适应宽度居中,css自适应宽度多种方法实现宽度自适应的水平居中