成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css的居中布局問題

leoperfect / 1707人閱讀

摘要：在和下不支持屬性，設(shè)置方法無法解決瀏覽器兼容問題。對于不支持的和使用特定的。利用技術(shù)區(qū)別對待和，在不支持的下，通過給父子兩層元素分別設(shè)置和來實(shí)現(xiàn)居中。

css經(jīng)常用來處理居中問題，不同的情況使用不同的方法； 
一 :水平居中

(1)文本、圖片等行內(nèi)元素的水平居中

給父元素設(shè)置text-align:center,可以實(shí)現(xiàn)文本、圖片等行內(nèi)元素的水平居中




    hello world!

父元素高度不確定的文本、圖片、塊級元素的垂直居中通過給父容器設(shè)置相同的上下內(nèi)邊距來實(shí)現(xiàn)。

2 父元素高度確定的單行文本的垂直居中



hello world

父元素高度確定的單行文本的垂直居中，通過給父元素設(shè)置line-height來實(shí)現(xiàn)的，line-height的值和父元素的高度值相同

3 父元素高度確定的多行文本、圖片、塊級元素的垂直居中

方法一

利用css的一個垂直居中屬性vertical-align，但是只有當(dāng)父元素為td或th時，這個vertical-align才會生效，對于其他的塊級元素（div、p）默認(rèn)情況下是不支持該屬性。在Firefox和IE8下，可以設(shè)置塊級元素的display:table-cell屬性，激活vertical-align。在IE6和IE7下不支持table-cell屬性，設(shè)置table-cell方法無法解決瀏覽器兼容問題?？傊?，直接使用表格減少些操作。缺點(diǎn)是增加了嵌套深度和語義標(biāo)簽。




    

        hello

        hello

        hello

        hello

方法二

對于支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。對于不支持的IE6和IE7使用特定的hack。利用hack技術(shù)區(qū)別對待Firefox、IE8、IE7和IE6，在不支持display:table-cell的IE6、IE7下，通過給父子兩層元素分別設(shè)置top:50%和top:-50%來實(shí)現(xiàn)居中。




    

        

            

            hello world!

            hello world!

            hello world!

內(nèi)容選自《編寫高質(zhì)量代碼-web前端開發(fā)修煉之道》

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116564.html

相關(guān)文章

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    lijinke666 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    hedge_hog 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    kun_jian 評論0 收藏0

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

    摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(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

發(fā)表評論

0條評論

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