亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

raledong / 1351人閱讀

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

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

點(diǎn)擊查看演示DEMO

方案一

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

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

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

可以保留塊級(jí)元素仍然是以display:block的形式顯示,不會(huì)添加無(wú)意義的標(biāo)簽,不添加嵌套深度。缺點(diǎn)是設(shè)置了position:relative;帶來(lái)了一些副作用，并且需要閉合（清除）浮動(dòng)。

方案二

利用text-align屬性特性（text-align:center 對(duì)于ie6、7塊級(jí)和內(nèi)聯(lián)級(jí)都可以水平居中。其它瀏覽器內(nèi)聯(lián)級(jí)(內(nèi)聯(lián)塊級(jí)，文字)元素才可以水平居中，塊級(jí)無(wú)效。 ）強(qiáng)制定義為內(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作為容器的方法來(lái)實(shí)現(xiàn)。添加了無(wú)意義的標(biāo)簽。Table標(biāo)簽本身并不是塊級(jí)元素,當(dāng)我們不設(shè)置table的寬度的話,他里面的寬度是由他內(nèi)部元素的寬度撐起來(lái)的。但即使我們沒(méi)有設(shè)置table的寬度,直接設(shè)置table的外邊距margin:0 auto;就可以實(shí)現(xiàn)水平居中了!這樣我們就可以通過(guò)設(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的居中無(wú)效，這里在IE6/7下設(shè)置了display:inline，神奇的是竟然可以設(shè)置寬高及其垂直方向的內(nèi)外邊距。缺點(diǎn)是display:inline-block會(huì)引起一些間隙，當(dāng)然有看起來(lái)礙眼解決方案。

方案五

利用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)|西也很蛋疼。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111009.html

相關(guān)文章

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

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

    shenhualong 評(píng)論0 收藏0

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

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

    Scholer 評(píng)論0 收藏0

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

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

    mayaohua 評(píng)論0 收藏0

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

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

    Apollo 評(píng)論0 收藏0

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

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

    joyqi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

raledong

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<