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

資訊專欄INFORMATION COLUMN

水平垂直居中

MingjunYang / 466人閱讀

摘要：它為什么備受關(guān)注并不是因?yàn)樗y實(shí)現(xiàn)，而是因?yàn)閷?shí)現(xiàn)的策略太多了，讓人無可下手，無可選擇。多行塊級元素實(shí)現(xiàn)原理同水平居中的水平垂直居中綜合運(yùn)用水平垂直居中即可。

它為什么備受關(guān)注？

并不是因?yàn)樗y實(shí)現(xiàn)，而是因?yàn)閷?shí)現(xiàn)的策略太多了，讓人無可下手，無可選擇。

將各個(gè)問題分類，給出常用解

水平居中 行內(nèi)元素： text-align:center

html:

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    text-align: center;
}
a{
    color: #000;
}

單行塊級元素 已知寬：margin：0 auto；

html：


    width:200px;
    margin：0 auto；

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    width :200px;
    margin: 0 auto;
}

當(dāng)它是float的時(shí)候，效果并不理想！
float:left;

已知寬:position : absolute;

html:


    position: absolute;

    width :300px;

    left: 50%;

    margin-left: -150px;

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    width :300px;
    left: 50%;
    margin-left: -150px;
}

不需要已知寬：position：absolute;

html:


    position: absolute;

    left: 50%;

    transform: translateX(-50%);

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

多行塊級元素 display : flex;

html:


    

        display:flex;
    

    

        display:flex;
    

    

        display:flex;
    

    

        display:flex;

css:

.parent{
    display: flex;
    justify-content: center;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    background-color: #cbcbcb;
    padding: 0 20px;
}

display : inline-block;

html：


    

        display:inline-block;
    

    

        display:inline-block;
    

    

        display:inline-block;
    

    

        display:inline-block;

css：

.parent{
    text-align: center;
    padding: 0;
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
.child{
    display: inline-block;
    background-color: #cbcbcb;
    padding: 0 20px;
}

小問題

有沒有發(fā)現(xiàn)，inline-blodk之間是有邊距的？這可不是bug,是因?yàn)樵刂g存在空格，如何去消除呢？去除inline-block元素間間距的N種方法

垂直居中 行內(nèi)元素 padding：30px 0;

html:


    
        padding-top: 30px 0;

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    padding: 30px 0;
}
a{
    color:#000;
}

line-height : height;

html:


    
        height: 100px;
        line-height: 100px;

css:

p{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
    line-height: 100px;
}
a{
    color: #000;
}

多行行內(nèi)元素 vertical : middle;

html:


    

        

            default:

                vertical:middle

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
}
table{
    height: 100px;
}

display : flex;

html:

css:

div{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
a{
    color: #000;
}
加入幽靈元素

html:

css:

.ghost{
    background-color: #f8c5c7;
    font-size: 20px;
    font-weight: 800;
    font-family: cursive;
    height: 100px;
}
.ghost:before{
    content: "";
    display: inline-block;;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
a{
    display: inline-block;
    vertical-align: middle;
    color: #000;
}
單行塊級元素

實(shí)現(xiàn)原理同水平居中。

多行塊級元素

實(shí)現(xiàn)原理同水平居中的display：flex;

水平垂直居中

綜合運(yùn)用水平垂直居中即可。

參考資料

Centering in CSS: A Complete Guide
Flexbox詳解

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

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

相關(guān)文章

  • 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定

    摘要：包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中，比較特殊。 2018.05.29 居中一個(gè)元素？你會想到啥？這里面的知識還真不少。包括水平居中，垂直居中，還有水平垂直居中。如果要再要細(xì)分，還要分浮動元素、絕對定位的居中。為了代碼簡介，沒有加背景和其他樣式，需要看效果的，可以加上背景。 目錄： 第一...

    waterc 評論0 收藏0

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

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

    scwang90 評論0 收藏0

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

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

    Lsnsh 評論0 收藏0

  • 水平垂直居中

    摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素 筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行 下面三種方案平常都很少被使用的到 ...

    incredible 評論0 收藏0

  • 水平垂直居中

    摘要：筆記整理之一水平垂直居中固定寬高一般使用負(fù)值進(jìn)行居中不固定寬高一般使用和進(jìn)行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素 筆記整理之一：水平垂直居中 PC固定寬高、一般使用maring負(fù)值進(jìn)行居中PC不固定寬高、一般使用relative和left進(jìn)行 下面三種方案平常都很少被使用的到 ...

    eechen 評論0 收藏0

  • 【第1期】聊聊css居中那點(diǎn)事

    摘要：前言居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點(diǎn)事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實(shí)現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點(diǎn)事。 我們主要從這幾個(gè)方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...

    劉永祥 評論0 收藏0

發(fā)表評論

0條評論

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