css自适应宽度多种方法实现宽度自适应的水平居中
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css⾃适应宽度多种⽅法实现宽度⾃适应的⽔平居中
当⽗元素和⼦元素都没有定义宽度的情况下实现⽔平居中：
display:inline-block
可以使⽤text-align:center和display:inline-block相结合，这个技巧需要⼀个⽗元素。
HTML代码:
复制代码
代码如下:
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
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代码:
复制代码
代码如下:
<div class="navbar">
<div>
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
</div>
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代码:
复制代码
代码如下:
<ul class="navbar">
<li><a href="/">Home</a></li>
…
</ul>
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代码:
复制代码
代码如下:
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
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代码:
复制代码
代码如下:
<div class="navbar center">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About us</a></li>
<li><a href="/">Our products</a></li>
<li><a href="/">Customer support</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
CSS代码:
复制代码
代码如下:
.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;