亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css系列之水平垂直居中

MiracleWong / 3582人閱讀

摘要：水平居中水平居中沒有什么好說的啦，對于行內(nèi)元素使用對于塊級元素使用前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)膶挾却怪本又袉涡形谋径嘈形谋緜卧匦袃?nèi)元素偽元素未知寬高絕對居中絕對定位已知寬高負(fù)要考慮兼容性浮動元素垂直居中父元素

水平居中

水平居中沒有什么好說的啦，對于行內(nèi)元素使用text-align;對于塊級元素使用margin: auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度）;

垂直居中 單行文本 
line-height == height
多行文本 偽元素before/after 

    etttttttttttttttttttttttttttttttttttttttttttttgdfsffffffffffffffffffffffffffffffffffffffffffffffffff


.parent {
  height: 250px;
  text-align: center;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
   width: 200px;
   display: inline-block;
   word-wrap: break-word;
   border: 1px solid;
   vertical-align: middle;
}
行內(nèi)元素 line-height 

　


.parent {
  line-height: 200px; 
}
.child {
    vertical-align: middle;
}
偽元素before/after 

　


.parent {
  height: 200px;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
    vertical-align: middle;
}
table-cell ie8+ 

　


.parent {
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}
.child {
  vertical-align: middle;
}
未知寬高 絕對居中+margin:auto 
.parent {
   position: relative;
}
.child {
   position: absolute; 
   left: 0; 
   top: 0; 
   right: 0; 
   bottom: 0;
　 margin: auto;
}
絕對定位+transform ie9+ 
.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 transform: translate(-50%,-50%);
}
flex ie10+ 
.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
grid ie10+ 
.parent {
   display: grid;
   justify-content: center;
   align-items: center;
}
已知寬高 負(fù)margin

要考慮兼容性

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 margin: -height/2 -width/2;
}
padding 
.parent {
   padding: (parent.height-child.height)/2  (parent.width-child.width)/2;
}
absolute + calc ie9+ 
.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: calc(50% - height/2 );
　 left: calc(50% - height/2 );
}
浮動元素垂直居中 父元素table-cell 
#demo {
    width: 300px;
    height: 200px;
    background-color: grey;
    
    display: table-cell;
    vertical-align: middle;
}
.fl {
    float: left;
    width: 50px;
    height: 50px;
    background-color: black;

}

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

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

相關(guān)文章

  • CSS之各種居中

    摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中，居中這個問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語以上的方法基本上可以用完成各種情況的居中。 前言 在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因為CSS的居中方法以及它的適...

    Labradors 評論0 收藏0

  • CSS之各種居中

    摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中，居中這個問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語以上的方法基本上可以用完成各種情況的居中。 前言 在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因為CSS的居中方法以及它的適...

    Taste 評論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計達(dá)人，純，可以實現(xiàn)當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達(dá)人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...

    phpmatt 評論0 收藏0

  • CSS實現(xiàn)水平|垂直居中漫談

    摘要：原文首鏈實現(xiàn)水平垂直居中漫談利用進(jìn)行元素的水平居中，比較簡單，手到擒來行級元素設(shè)置其父元素的，塊級元素設(shè)置其本身的和為即可。 原文首鏈：CSS實現(xiàn)水平|垂直居中漫談 利用CSS進(jìn)行元素的水平居中，比較簡單，手到擒來：行級元素設(shè)置其父元素的text-align center，塊級元素設(shè)置其本身的left 和 right margins為auto即可。而擼起垂直居中，相信于大多初擼者來說，...

    孫吉亮 評論0 收藏0

  • 查漏補(bǔ)缺 - 收藏集 - 掘金

    摘要：醞釀許久之后，筆者準(zhǔn)備接下來撰寫前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點在實際開發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認(rèn)識了兩位同是10年工作經(jīng)驗的阿里前端開發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時候還會選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機(jī)會都沒有，但是我感受到了一次面試1...

    YuboonaZhang 評論0 收藏0

發(fā)表評論

0條評論

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