css自適應(yīng)寬度 多種方法實現(xiàn)寬度自適應(yīng)的水平居中
發(fā)布時間：2013-04-05 21:22:59 作者：佚名 
我要評論
我要評論寬度自適應(yīng)達(dá)到水平居中在網(wǎng)頁制作中很常見而且很實用，本文整理搜集了一些實用的自適應(yīng)寬度的水平居中技巧，感興趣前端工程師們可以借鑒一下，或許對你有所幫助
當(dāng)父元素和子元素都沒有定義寬度的情況下實現(xiàn)水平居中：
display:inline-block
可以使用text-align:center和display:inline-block相結(jié)合，這個技巧需要一個父元素。
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相結(jié)合的技巧及其浮動和定位參照物的關(guān)系，這個技巧需要兩個父元素，一個用來定位而另外一個用來避免出現(xiàn)滾動條。
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
如果向使用極少的標(biāo)簽實現(xiàn)，這個方法是個不錯的選擇。
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創(chuàng)建一個包含子元素浮動的未知寬度的導(dǎo)航。
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-內(nèi)核瀏覽器。當(dāng)然以后慢慢會發(fā)展起來的。
這個方式是推動瀏覽器發(fā)展的一個新的東西，目前供應(yīng)于所以可以寫前綴的瀏覽器，并沒有工作在IE9和IE9以下。
根據(jù)你的需求來選擇合適的方法吧，display:inline-block兼容性較好，flex-box將會用于未來。
演示
display:inline-block
可以使用text-align:center和display:inline-block相結(jié)合，這個技巧需要一個父元素。
HTML代碼:
復(fù)制代碼
代碼如下:<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
CSS代碼:
復(fù)制代碼
代碼如下:.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一樣
復(fù)制代碼
代碼如下:.navbar ul {
*display:inline;
*zoom:1;
}
position:relative
使用position:relative與float相結(jié)合的技巧及其浮動和定位參照物的關(guān)系，這個技巧需要兩個父元素，一個用來定位而另外一個用來避免出現(xiàn)滾動條。
HTML代碼:
復(fù)制代碼
代碼如下:<div class="navbar">
<div>
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
</div>
CSS代碼:
復(fù)制代碼
代碼如下:.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下需要加入下列代碼支持：
復(fù)制代碼
代碼如下:.navbar {
position:relative;
}
display:table
如果向使用極少的標(biāo)簽實現(xiàn)，這個方法是個不錯的選擇。
HTML代碼:
復(fù)制代碼
代碼如下:<ul class="navbar">
<li><a href="/">Home</a></li>
…
</ul>
CSS代碼:
復(fù)制代碼
代碼如下:.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
不支持IE7及一下瀏覽器，其他的主流瀏覽器都支持。
display:inline-flex
這個方法需要使用 flex-layout 的知識。
HTML代碼:
復(fù)制代碼
代碼如下:<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
CSS代碼:
復(fù)制代碼
代碼如下:.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創(chuàng)建一個包含子元素浮動的未知寬度的導(dǎo)航。
HTML代碼:
復(fù)制代碼
代碼如下:<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代碼:
復(fù)制代碼
代碼如下:.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
瀏覽器支持度較低 只Chrome和Firefox這樣的-webkit- -moz-內(nèi)核瀏覽器。當(dāng)然以后慢慢會發(fā)展起來的。
這個方式是推動瀏覽器發(fā)展的一個新的東西，目前供應(yīng)于所以可以寫前綴的瀏覽器，并沒有工作在IE9和IE9以下。
根據(jù)你的需求來選擇合適的方法吧，display:inline-block兼容性較好，flex-box將會用于未來。
演示
相關(guān)文章
- 2009-06-19
CSS里的各種水平垂直居中基礎(chǔ)寫法心得總結(jié)
介紹一下行內(nèi)元素和塊級元素，這個很重要，因為有的屬性只能用于塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉(zhuǎn)換，比如用display來進行設(shè)置，感興趣的朋友可2013-05-06css圖片垂直居中 css中如何實現(xiàn)圖片垂直居中
使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中，下面是一個權(quán)衡的相對結(jié)構(gòu)干凈，CSS簡單的解決方法2013-04-17關(guān)于圖片垂直居中的話題想必大家在論壇或者是百度搜索列表中看到了不少了吧，煩人的是沒有具體或者相當(dāng)詳細(xì)的解決方法，希望本文所整理的知識點可以幫助到你2013-03-22在CSS中加了margin:0 auto;卻沒有效果，不能居中的問題；它的本意就是上下邊界為0，左右根據(jù)寬度自適應(yīng)！其實就是~~水平居中的意思，接下來為大家介紹下兩個典型的錯誤引起2013-03-15div垂直居中的N種方法 單行/多行文字(未知高度/固定高度)
接下來將介紹下：div垂直居中的N種方法包括:單行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解決方案等等感興趣的你可不要錯過了2013-02-17單選框和復(fù)選框面積很小，不容易點擊，造成許多用戶的困擾，用戶體驗不佳，所以表單元素的垂直居中讓很多網(wǎng)頁布局師為之而困擾，想實現(xiàn)垂直居中效果還真需要一番功夫，還好2013-02-16元素及文本的居中包括(層的橫向居中/層的垂直居中/絕對居中)以及文本掙開div的題，也在這里給予了解決方法，感興趣的朋友可以了解下啊，希望本文可以幫助到你2013-01-18三種方式實現(xiàn)元素水平居中顯示與固定布局和流式布局概念理解
css中讓文本居中的屬性很簡單就可以實現(xiàn)，那就是設(shè)置text-align:center即可,讓元素水平居中，相信對于許多網(wǎng)頁設(shè)計師而言都不會陌生,首先，要 讓元素水平居中，就必須得了2013-01-11簡單總結(jié)一下html中元素的 水平居中、垂直居中、絕對居中的實現(xiàn)方式,感興趣的朋友可以了解下哦2013-01-07最新評論