css自适应宽度 多种方法实现宽度自适应的水平居中
发布时间:2013-04-05 21:22:59 作者:佚名
我要评论

宽度自适应达到水平居中在网页制作中很常见而且很实用,本文整理搜集了一些实用的自适应宽度的水平居中技巧,感兴趣前端工程师们可以借鉴一下,或许对你有所帮助
当父元素和子元素都没有定义宽度的情况下实现水平居中:
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;
width: fit-content;
margin: auto;
}
浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。
这个方式是推动浏览器发展的一个新的东西,目前供应于所以可以写前缀的浏览器,并没有工作在IE9和IE9以下。
根据你的需求来选择合适的方法吧,display:inline-block兼容性较好,flex-box将会用于未来。
演示
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;
width: fit-content;
margin: auto;
}
浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。
这个方式是推动浏览器发展的一个新的东西,目前供应于所以可以写前缀的浏览器,并没有工作在IE9和IE9以下。
根据你的需求来选择合适的方法吧,display:inline-block兼容性较好,flex-box将会用于未来。
演示
相关文章
- 2009-06-19介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置,感兴趣的朋友可2013-05-06使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中,下面是一个权衡的相对结构干净,CSS简单的解决方法2013-04-17关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你2013-03-22在CSS中加了margin:0 auto;却没有效果,不能居中的问题;它的本意就是上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,接下来为大家介绍下两个典型的错误引起2013-03-15
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了2013-02-17单选框和复选框面积很小,不容易点击,造成许多用户的困扰,用户体验不佳,所以表单元素的垂直居中让很多网页布局师为之而困扰,想实现垂直居中效果还真需要一番功夫,还好2013-02-16元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题,也在这里给予了解决方法,感兴趣的朋友可以了解下啊,希望本文可以帮助到你2013-01-18css中让文本居中的属性很简单就可以实现,那就是设置text-align:center即可,让元素水平居中,相信对于许多网页设计师而言都不会陌生,首先,要 让元素水平居中,就必须得了2013-01-11简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦2013-01-07
最新评论