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

資訊專(zhuān)欄INFORMATION COLUMN

css實(shí)現(xiàn)div水平/垂直居中的N中方法

張紅新 / 1989人閱讀

摘要：父內(nèi)部的所有子水平居中代碼子元素縱向排列水平居中代碼子元素橫向排列且水平居中代碼子元素縱向排列垂直居中代碼子元素橫向排列垂直居中代碼子元素水平方向垂直方向都居中方式一代碼子元素水平方向垂直方向都居中方式二如果有多個(gè)子元素會(huì)

1、父div內(nèi)部的所有子div水平居中

// html 代碼


    

    

    




/*子元素縱向排列水平居中*/
// css 代碼
.parent{
    width: 400px; 
    height: 600px; 
} 
.chil{ 
    width: 120px;
    height: 120px; 
    margin: 0 auto; 
}

/*子元素橫向排列且水平居中*/
//css代碼
.parent{
    width: 400px;
    height: 400px;
    text-align: center;

}
.chil{
    width: 120px;    
    height: 120px;
    display: inline-block;
}

/*子元素縱向排列垂直居中*/
//css 代碼
.parent{
    width: 400px; 
    height: 600px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素橫向排列垂直居中*/
// cs 代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: flex; 
    align-items:center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
}

/*子元素水平方向垂直方向都居中 方式一*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    display: inline-block; 
}

/*子元素水平方向垂直方向都居中 方式二 如果有多個(gè)子元素會(huì)重疊在父元素中心位置*/
//css代碼
.parent{
    width: 400px; 
    height: 400px; 
    position: relative; 
} 
.chil{ 
    width: 30%; 
    height: 30%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform:translate(-50%, -50%);
    //transform:translate(0, -50%); 垂直方向上居中且多個(gè)子元素重疊
    //transform:translate(-50%); 水平方向上居中且多個(gè)子元素重疊
}

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

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

相關(guān)文章

  • css實(shí)現(xiàn)div水平/垂直居中的N中方法

    摘要：父內(nèi)部的所有子水平居中代碼子元素縱向排列水平居中代碼子元素橫向排列且水平居中代碼子元素縱向排列垂直居中代碼子元素橫向排列垂直居中代碼子元素水平方向垂直方向都居中方式一代碼子元素水平方向垂直方向都居中方式二如果有多個(gè)子元素會(huì) 1、父div內(nèi)部的所有子div水平居中 // html 代碼 /*子元素縱向排列水平居中*/ // css 代碼 .parent...

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

  • 水平垂直居中

    摘要：它為什么備受關(guān)注并不是因?yàn)樗y實(shí)現(xiàn)，而是因?yàn)閷?shí)現(xiàn)的策略太多了，讓人無(wú)可下手，無(wú)可選擇。多行塊級(jí)元素實(shí)現(xiàn)原理同水平居中的水平垂直居中綜合運(yùn)用水平垂直居中即可。 它為什么備受關(guān)注？ 并不是因?yàn)樗y實(shí)現(xiàn)，而是因?yàn)閷?shí)現(xiàn)的策略太多了，讓人無(wú)可下手，無(wú)可選擇。 將各個(gè)問(wèn)題分類(lèi)，給出常用解 水平居中 行內(nèi)元素： text-align:center html: text-align:cent...

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

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

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

    劉永祥 評(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

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

0條評(píng)論

閱讀需要支付1元查看
<