成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css居中最佳實(shí)踐

BlackFlagBin / 487人閱讀

摘要：居中是非常常見的問題，也是面試熱門，現(xiàn)在對(duì)居中問題做個(gè)總結(jié)水平居中萬能的居中給父元素添加子元素都會(huì)居中，無論是還是缺點(diǎn)屬性會(huì)繼承會(huì)影響后代元素配合缺點(diǎn)以下不兼容，不過低版本微軟自家都不支持了垂直居中單行居中與相等即可達(dá)到居中配

css居中是非常常見的問題，也是面試熱門，現(xiàn)在對(duì)居中問題做個(gè)總結(jié)

水平居中 萬能的text-align居中

給父元素添加text-align:　center,子元素都會(huì)居中，無論是inline還是block
缺點(diǎn)：text-align屬性會(huì)繼承會(huì)影響后代元素

display: table配合margin: 0 auto 
.center {
    display: table;
    margin: 0 auto;
}

缺點(diǎn)：IE7以下不兼容，不過低版本IE微軟自家都不支持了

垂直居中 line-height單行居中

line-height與height相等即可達(dá)到居中

.center{
    height: 100px;
    line-height: 100px;
}
display: table-cell配合vertical

父元素添加display: table,
子元素：

.child{
    display: table-cell;
    vertical-align: middle;
}

后兩種都支持多行文字居中

綜合解決方案 flexbox

給父元素設(shè)置display: flex;，水平居中用justify-content: center;,垂直居中設(shè)置align-items: center;

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

缺點(diǎn)：兼容不是很好

絕對(duì)定位配合transform

父元素設(shè)置相對(duì)定位

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
}

缺點(diǎn)：低版本IE不兼容
同時(shí)這兩種方案也解決了不定寬高居中的問題

參考資料

CSS居中完全指南
CSS之各種居中
Flex布局兼容性

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

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

相關(guān)文章

  • 《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊

    摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁(yè)面布局中，內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px，2px而頭疼不已...

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

  • 開發(fā)H5時(shí)背景照片兼容不同手機(jī)屏幕處理的最佳實(shí)踐

    摘要：翻頁(yè)的背景圖通常是要求全屏的。這里就存在一個(gè)問題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會(huì)是這樣的效果比例的手機(jī)裁切的是靠下的部分，而比例的手機(jī)裁切的是靠右的部分。 最近在重新做過去常做的翻頁(yè)H5，關(guān)于背景圖有些新的經(jīng)驗(yàn)心得分享。 翻頁(yè)H5的背景圖通常是要求全屏的。這里就存在一個(gè)問題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...

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

  • 開發(fā)H5時(shí)背景照片兼容不同手機(jī)屏幕處理的最佳實(shí)踐

    摘要：翻頁(yè)的背景圖通常是要求全屏的。這里就存在一個(gè)問題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會(huì)是這樣的效果比例的手機(jī)裁切的是靠下的部分，而比例的手機(jī)裁切的是靠右的部分。 最近在重新做過去常做的翻頁(yè)H5，關(guān)于背景圖有些新的經(jīng)驗(yàn)心得分享。 翻頁(yè)H5的背景圖通常是要求全屏的。這里就存在一個(gè)問題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...

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

  • css相關(guān) - 收藏集 - 掘金

    摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁(yè)面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個(gè)技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動(dòng)畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實(shí)現(xiàn)了一下，順便...

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

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

0條評(píng)論

閱讀需要支付1元查看
<