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

資訊專欄INFORMATION COLUMN

常見布局方法總結(jié)-居中布局

JowayYoung / 1114人閱讀

摘要：常見布局方法總結(jié)水平居中布局使用場景頁面整體水平居中，有具體寬度要求。

常見布局方法總結(jié) 水平居中布局

(1) width: (xxx)px; margin: 0 auto;

使用場景：頁面整體水平居中，有具體寬度要求。


  


.content {
  width:1000px;
  height:100px;
  background:red;
  margin:0 auto;
}

(2) text-align: center; display: inline-block;

使用場景：子元素有多個(gè)且需要水平居中排列


  

  

  

  

  


.wrap {
  text-align: center;
}
.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

(3) absolute+left:50%+margin-left:-width/2

使用場景：子元素寬度確定，子元素之間互不影響


  

    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  


.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  background: red;
}

(4) absolute+left:50%+translateX(-50%)

使用場景：子元素寬度不確定，支持css3的translate屬性，子元素之間互不影響


  

    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  


.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  height: 100px;
  background: red;
  transform: translateX(-50%);
}

(5) flex布局

使用場景: 支持flex布局方式的瀏覽器都可以使用此布局，結(jié)合了(2)(4)兩種方法的優(yōu)點(diǎn)，無需考慮子元素寬度，且支持多個(gè)子元素居中


  

    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  


.wrap {
  display: flex;
  justify-content: center;
}
.content {
  height: 100px;
  background: red;
}
垂直居中布局

相比水平居中布局，垂直居中稍微坑了一點(diǎn)，實(shí)現(xiàn)方法并沒有靈活。

(1)table-cell布局
使用場景：多行文字上下居中


  

    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  


.wrap {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}
.content {
  width: 100px;
  background: red;
}

(2)absolute+top:50%+margin-top:-height/2
使用場景：與水平居中一樣，適用于子元素高度確定，不會對其他子元素造成影響的情況下的上下居中,由于是絕對定位，父元素需要占據(jù)空間，若沒有其他子元素，需設(shè)置一個(gè)高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  margin-top: -50px;
  background: red;
}

(3) absolute+top:50%+translateY(-50%)
使用場景：與水平居中一樣，適用于子元素高度不確定，不會對其他子元素造成影響的情況下的上下居中,由于是絕對定位，父元素需要占據(jù)空間，若沒有其他子元素，需設(shè)置一個(gè)高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top:50%;
  background: red;
  transform: translateY(-50%);
}

(4) flex布局

使用場景: 支持flex布局方式的瀏覽器都可以使用此布局，無需考慮子元素高度，書寫簡便快捷


  

    快過年了快過年了快過年了快過年了快過年了快過年了快過年了
  


.wrap {
  display: flex;
  align-items: center;
  height: 200px;
}
.content {
  background: red;
}

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

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

相關(guān)文章

  • 常見布局方法總結(jié)-居中布局

    摘要：常見布局方法總結(jié)水平居中布局使用場景頁面整體水平居中，有具體寬度要求。 常見布局方法總結(jié) 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用場景：頁面整體水平居中，有具體寬度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...

    Wuv1Up 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對布局，以及對應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評論0 收藏0

  • css--布局

    摘要：布局方式布局的傳統(tǒng)解決方案，基于盒狀模型，依賴屬性屬性屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。關(guān)于布局，當(dāng)然肯定還有更多的更好的方法。 接觸前端開發(fā)也有半年了，每當(dāng)需要將一個(gè)空白的紙，畫成一個(gè)頁面的時(shí)候，總會出現(xiàn)不知所措的幾秒鐘。除了因?yàn)閷ss中的各種屬性的不熟練之外，更難為人的是怎么簡練的將這些屬性排列組合起來。其實(shí)靜下心來，仔細(xì)想一想，無非就是整體-->局...

    Nino 評論0 收藏0

發(fā)表評論

0條評論

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