国产成人无码VA在线观看,久久久久久久999

您當(dāng)前所在位置：首頁(yè) → 網(wǎng)絡(luò)編程 → DIVCSS → 完美解決CSS網(wǎng)頁(yè)水平居中

完美解決CSS網(wǎng)頁(yè)水平居中 時(shí)間：2015-06-28 00:00:00 來(lái)源：IT貓撲網(wǎng) 作者：網(wǎng)管聯(lián)盟 我要評(píng)論(0)

　　同樣的合法CSS居中設(shè)置在不同瀏覽器中的表現(xiàn)行為卻各有千秋，下面讓我們先來(lái)看一下CSS中常見的幾種讓元素水平居中顯示的方法。

　　CSS常見的讓元素水平居中顯示方法

　　用CSS讓元素居中顯示并不是件很簡(jiǎn)單的事情—同樣的合法CSS居中設(shè)置在不同瀏覽器中的表現(xiàn)行為卻各有千秋。讓我們先來(lái)看一下CSS中常見的幾種讓元素水平居中顯示的方法。

　　1.使用自動(dòng)外邊距實(shí)現(xiàn)居中

　　CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設(shè)置為auto即可。在實(shí)際使用中，我們可以為這些需要居中的元素創(chuàng)建一個(gè)起容器作用的div。需要特別注意的一點(diǎn)就是，必須為該容器指定寬度：

　　div#container{ margin-left:auto; margin-right:auto; width:168px; }

　　在大多數(shù)主流瀏覽器中，這種方法都非常有效，即使是Windows平臺(tái)上的IE6，在其標(biāo)準(zhǔn)兼容模式(compliancemode)下也能夠正常顯示。但不幸的是，在更低版本的IE中，這種設(shè)置卻并不能實(shí)現(xiàn)居中效果。所以若想在實(shí)際項(xiàng)目中使用這種方法，那么就要確保用戶的IE瀏覽器版本不低于6.0。

　　盡管在支持上不盡如人意，但大多數(shù)設(shè)計(jì)師都建議盡可能地使用這種方法。該方法也被認(rèn)為是在各種用CSS實(shí)現(xiàn)元素水平居中方法中最正確、最合理的一種。

　　2.使用text-align實(shí)現(xiàn)居中

　　另一種實(shí)現(xiàn)元素居中的方法是使用text-align屬性，將該屬性值設(shè)置為center并應(yīng)用到body元素上即可。這種做法是徹頭徹尾的hack，但它卻能兼容大多數(shù)瀏覽器，所以在某些情況下也自然必不可少。

　　之所以說(shuō)它是hack，是因?yàn)檫@種方法并沒(méi)有將文本屬性應(yīng)用到文本上，而是應(yīng)用到了作為容器的元素上。這也給我們帶來(lái)了額外的工作。在創(chuàng)建好布局必須的div之后，我們要按照如下代碼為body應(yīng)用text-align屬性：

　　body{ text-align:center; }

　　之后會(huì)出現(xiàn)什么問(wèn)題嗎?body的所有子孫元素都會(huì)被居中顯示。

　　因此，我們就需要用再寫一條規(guī)則，讓其中的文本回到默認(rèn)的居左對(duì)齊：

　　p{ text-align:left; }

　　可以想象這條附加的規(guī)則將帶來(lái)一些不便。另外，真正完全遵循標(biāo)準(zhǔn)的瀏覽器并不會(huì)改變?nèi)萜鞯奈恢?，而只?huì)讓其中的文字居中顯示。

　　3.組合使用自動(dòng)外邊距和文本對(duì)齊

　　因?yàn)槲谋緦?duì)齊居中方式有著良好的向下兼容性，且自動(dòng)外邊距方式也被大多數(shù)當(dāng)代瀏覽器支持，所以很多設(shè)計(jì)師將二者組合起來(lái)使用，以期讓居中效果得到最大限度的跨瀏覽器支持：

　　body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; width:168px; text-align:left }

　　可是這始終是個(gè)hack，無(wú)論如何也算不上完美。我們還是需要為居中容器中的文本編寫附加的規(guī)則，但至少在各個(gè)瀏覽器中看起來(lái)都不錯(cuò)。

　　4.負(fù)外邊距解決方案

　　負(fù)外邊距解決方案遠(yuǎn)不是僅僅為元素添加負(fù)外邊距這么簡(jiǎn)單。這種方法需要同時(shí)使用絕對(duì)定位和負(fù)外邊距兩種技巧。

　　下面是該方案的具體實(shí)現(xiàn)方法。首先，創(chuàng)建一個(gè)包含居中元素的容器，然后將其絕對(duì)定位于相對(duì)頁(yè)面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁(yè)面50%寬度的位置開始算起。

　　然后，將容器的左外邊距值設(shè)置為負(fù)的容器寬度的一半。這樣即可將該容器固定在頁(yè)面水平方向的中點(diǎn)。

　　#container{ background:#ffcurl(mid.jpg)repeat-ycenter; position:absolute; left:50%; width:760px; margin-left:-380px; }

　　看，沒(méi)有任何hack!雖然這并不是首選的解決方案，但也是個(gè)不錯(cuò)的方法，且適用性極廣—甚至在NetscapeNavigator4.x中都沒(méi)有任何問(wèn)題，很令人吃驚，不是嗎?所以若想得到最廣泛的瀏覽器支持，那么這種方法將會(huì)是最好的選擇。

關(guān)鍵詞標(biāo)簽：CSS網(wǎng)頁(yè)

相關(guān)閱讀

文章評(píng)論

查看所有0條評(píng)論>>