0871-63333123
當前位置:首頁 > 動態 >技術文章

CSS不定寬度分頁如何居中的3種方法

網站建設中,CSS不定寬度分頁如何居中的3種方法;前言:有個客戶最近有個需求,需要分頁的樣式居中顯示,本來很簡單的需求,但是因為有些地方有點復雜,所以,還是找了好多方法最后才比較完美的實現。在這里把找到方法列出來一下,最完美的是第一種方法。

1、第一種方式,利用position:relative;(相對浮動),思路是這樣的,“.page”向右浮動50%,是以外層“.pagelist”的寬度為標準的;內層(如LI)向左浮動50%,是以層“.page”的寬度為標準的,這里無需定義內層的寬度。這樣算是一個小技巧,讓“.page”居中了。

CSS代碼:

.pagelist{ text-align:center; height:22px;line-height:22px; overflow:hidden; width:100%;}

极速时时彩.pagelist .page{position:relative;left:50%;float:left;}

极速时时彩.page li{position:relative;left:-50%;display: inline;float:left; padding-right:4px;}

2、第二種方式很常見,就是設置ul標簽的文本居中,然后再設置li的顯示方式為inline顯示就可以了。這種的弊端是li下面的子標簽不能設置浮動,不能設置成block

#cha ul {  text-align:center;  }

#cha li{ display:inline; padding:0 8px;}

3、第三種方式借用JS來實現,原理很簡單,就是用JS計算出page的實際寬度后,賦值寬度給它,然后pagelist加上margin:0 auto;即可,但是這個也是有個弊端,就是JS的執行時在頁面加載完之后,所以你可能會看到一開始并不是居中的,等到頁面加載完成,執行了JS之后,那個分頁的樣式才會跳到居中那里,不是很友好。

 

鑒于此所以使用了第一種方式來實現,客戶也是很滿意這種效果的。

附上截圖:

 

CSS不定寬度分頁如何居中的3種方法_昆明網站建設