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

資訊專欄INFORMATION COLUMN

CSS水平居中和垂直居中

z2xy / 979人閱讀

摘要：不定寬塊狀元素水平居中垂直居中利用屬性垂直居中垂直居中利用布局不定高不定寬垂直居中垂直居中設(shè)置或另外設(shè)置為垂直居中或上下居中左右居中居中

CSS水平居中和垂直居中 行內(nèi)元素居中 水平居中

1.給父元素設(shè)置text-align:center


    行內(nèi)元素span居中

2.flex布局
設(shè)置父元素display:flex;justify-content:center;


    行內(nèi)元素span居中
垂直居中

1.父元素高度確定的單行文本(行內(nèi)元素),可設(shè)置line-height等于父元素高度


    坦克

2.父元素高度確定的多行文本(行內(nèi)元素)
方法一:使用插入 table (包括tbody、tr、td)標(biāo)簽,同時(shí)設(shè)置 vertical-align：middle( td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。)




    
    父元素高度確定的多行文本
    





    
    

        
            

                
看我是否可以居中。

                
看我是否可以居中。

                
看我是否可以居中。

                
看我是否可以居中。

                
看我是否可以居中。

方法二:設(shè)置塊級(jí)元素的 display 為 table-cell（設(shè)置為表格單元顯示），激活 vertical-align 屬性


    

        
坦克

        
航母
塊級(jí)元素居中 水平居中

1.定寬塊狀元素,設(shè)置左右margin值為auto


         
坦克

         
航母

2.不定寬塊狀元素方法
方法一:加入table標(biāo)簽,table標(biāo)簽長(zhǎng)度自適應(yīng)性,即不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度(其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定),可以看做一個(gè)定寬的元素,然后利用定寬塊狀居中的margin方法,使其水平居中


    
    

        
            

               
坦克

               
航母

方法二:改變塊級(jí)元素的 display 為 inline類型(設(shè)置為行內(nèi)元素顯示),然后使用text-align:center來實(shí)現(xiàn)居中效果


    
    不定寬塊狀元素水平居中

方法三:通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來實(shí)現(xiàn)水平居中。




    
    不定寬塊狀元素水平居中
垂直居中

1.利用CSS屬性transform:translate(x,y)




    
    垂直居中
    




    垂直居中

2.利用flex布局(不定高不定寬)




    
    垂直居中
    





    
垂直居中

3.設(shè)置position:absolute或fiexed,另外margin設(shè)置為auto




    
    垂直居中
    





    居中

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

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

相關(guān)文章

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

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

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

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

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

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

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級(jí)元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

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

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

    摘要：水平居中內(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)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。 簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

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

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個(gè)屬性為的父級(jí)元素中如設(shè)置這個(gè)父級(jí)元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

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

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

0條評(píng)論

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