国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

未知寬度水平居中的幾種方法

shenhualong / 3325人閱讀

摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設(shè)置的寬度直接設(shè)置的外邊距就可以實現(xiàn)水平居中了這樣我們就可以通過設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法

在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網(wǎng)上找了一些解決方法，并選了一個最合適的方法，現(xiàn)將當時整理的一些方法發(fā)出。下列以分頁作為演示說明：

點擊查看演示DEMO

方案一

利用浮動的包裹性和相對定位百分比數(shù)據(jù)值特性,傳說稱之為“相對浮動”

.unknow_width_center1 {position:relative; left:50%; float:left;}
.unknow_width_center1 li {position:relative;  right:50%; z-index:2; float:left}

通過給父元素設(shè)置浮動float,再設(shè)置父元素的position屬性為relative和left:50%;子元素設(shè)置position:relative和left:-50%來實現(xiàn)水平居中。

可以保留塊級元素仍然是以display:block的形式顯示,不會添加無意義的標簽,不添加嵌套深度。缺點是設(shè)置了position:relative;帶來了一些副作用，并且需要閉合（清除）浮動。

方案二

利用text-align屬性特性（text-align:center 對于ie6、7塊級和內(nèi)聯(lián)級都可以水平居中。其它瀏覽器內(nèi)聯(lián)級(內(nèi)聯(lián)塊級，文字)元素才可以水平居中，塊級無效。 ）強制定義為內(nèi)聯(lián) display:inline

.unknow_width_center2 {text-align:center; padding:5px;}
.unknow_width_center2 li {display:inline;}

將子元素設(shè)置為內(nèi)聯(lián)居中，那么大家都知道的display:inline內(nèi)聯(lián)元素寬高是不可以設(shè)定的，局限性太大，不宜使用。

方案三

利用table的屬性特性

.unknow_width_center3{margin:0 auto}
.unknow_width_center3 ul {overflow:hidden; *zoom:1}
.unknow_width_center3 ul li {float:left;}

是使用table作為容器的方法來實現(xiàn)。添加了無意義的標簽。Table標簽本身并不是塊級元素,當我們不設(shè)置table的寬度的話,他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度,直接設(shè)置table的外邊距margin:0 auto;就可以實現(xiàn)水平居中了!這樣我們就可以通過設(shè)置table水平居中,間接使里面的內(nèi)容居中。

方案四

利用內(nèi)聯(lián)塊display:inline-block的text-align屬性

.unknow_width_center4 {text-align:center}
.unknow_width_center4 ul li {display:inline-block; *display:inline; *zoom:1;}

IE6/7下直接設(shè)置display:inline-block的居中無效，這里在IE6/7下設(shè)置了display:inline，神奇的是竟然可以設(shè)置寬高及其垂直方向的內(nèi)外邊距。缺點是display:inline-block會引起一些間隙，當然有看起來礙眼解決方案。

方案五

利用table table-cell

.unknow_width_center5 ul{  display:table; margin:0 auto; }
.unknow_width_center5 li{display:table-cell;}

ie6/ie7不支持table-cell屬性，所以該方法也不適用ie6/ie7,如果需要兼容在這基礎(chǔ)上加?xùn)|西也很蛋疼。

點擊查看演示DEMO
個人偏向使用方法一”相對浮動”，適用廣泛代碼簡潔且不會出現(xiàn)什么問題，可惜就是每次使用的時候要考慮浮動的處理。

轉(zhuǎn)自：cocss ? 未知寬度水平居中的幾種方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49575.html

相關(guān)文章

  • 未知寬度水平居中的幾種方法

    摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設(shè)置的寬度直接設(shè)置的外邊距就可以實現(xiàn)水平居中了這樣我們就可以通過設(shè)置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法 在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網(wǎng)上找了一些解決方法，并選了一個最合適的方法，現(xiàn)將...

    raledong 評論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

    Scholer 評論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

    mayaohua 評論0 收藏0

  • 【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

    Apollo 評論0 收藏0

  • 使一個div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個應(yīng)該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個應(yīng)該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

    joyqi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<