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

資訊專欄INFORMATION COLUMN

【CSS篇】css居中解決辦法

appetizerio / 935人閱讀

摘要：水平居中行內(nèi)元素適用元素塊級元素適用于元素一個塊級元素多個塊級元素方法一將塊級元素變?yōu)樾袃?nèi)塊級元素部分部分方法二布局部分部分垂直居中行內(nèi)元素單個行內(nèi)元素情況一當(dāng)或文本有包裹元素時，設(shè)置相等的上下情況二當(dāng)或

水平居中

【行內(nèi)元素】適用inline,inline-block,inline-table,inline-flex元素

.center {
  text-align: center;
}

【塊級元素】適用于block level元素

①一個塊級元素

   .center {
 margin: 0 auto;
   }

②多個塊級元素

方法一：將塊級元素變?yōu)樾袃?nèi)塊級元素

html部分：


  
1

  
2

  
3



css部分：
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}


方法二：flex布局

html部分：


  
1

  
2

  
3



css部分：
.flex-center{
    display:flex;
  justify-content:center;
}

垂直居中

【行內(nèi)元素】

①單個行內(nèi)元素：

情況一：當(dāng)link或文本有包裹元素時，設(shè)置相等的上下padding

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

情況二：當(dāng)link或文本沒有包裹時，設(shè)置行高和高度相等

.center-text-trick {
  height: 100px;
  line-height: 100px
}

②多個行內(nèi)元素：

方法一：將多個行內(nèi)元素分別置于table-cell中

html部分:


  


  1

  



css部分：
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}


方法二：將父元素設(shè)置為display:table,將自身設(shè)置為display:table-cell

html部分：


  
1



css部分：
.center-table {
  display: table;
  height: 250px;
  width: 240px;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}


方法三：使用felex

html部分：


  
1



css部分：
.flex-center{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;/*父容器必須有固定高度*/
}


方法四：當(dāng)以上代碼均不可用時，可嘗試此奇淫巧技

html部分：


  
1



css部分：
.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

【塊級元素】

①已知元素高度(絕對定位+負(fù)的margin)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 為元素高度的一半，沒有box-sizing時，為height+padding+border的一半*/
}

②不知元素高度（與上一方法，大同小異）

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

③flex布局

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直均居中

①有固定寬高的元素

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;/* 注意此處為height+padding+的一半*/
}

②沒有固定寬高的元素(同之前沒有固定寬高元素一樣，用transform解決)

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

③使用flexbox布局

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

以上的居中大法，基本可以滿足日常需求啦，倘若有所錯誤，歡迎指正啦～

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

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

相關(guān)文章

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • 朝花夕拾：CSS居中完全指南

    摘要：正文居中是常被開發(fā)者抱怨的問題之一。注意你不能將浮動元素居中。水平且垂直居中你可以將前面的方法任意組合起來，實現(xiàn)完美的居中效果。這樣就可以使元素水平且垂直居中，并具有良好的瀏覽器兼容性。 參考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果沒有接...

    laznrbfe 評論0 收藏0

  • 老生常談之CSS的垂直居中

    摘要：在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內(nèi)容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個好處在于，它還可以將匿名容器即沒有被標(biāo)簽包裹的文本節(jié)點垂直居中。 主要摘自：《CSS 揭秘》，強(qiáng)烈推薦的一本書。 44 年前我們就把人類送上月球了，但現(xiàn)在我們?nèi)匀粺o法在 CSS 中 實現(xiàn)垂直居中?！狫ames Anderson(https://twitter.co...

    CompileYouth 評論0 收藏0

  • CSS進(jìn)階篇--CSS讓浮動元素水平居中

    摘要：對于定寬的非浮動元素我們可以用進(jìn)行水平居中。對于不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。 對于定寬的非浮動元素我們可以用 margin:0 auto; 進(jìn)行水平居中。 對于不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。如下： HTML 代碼： 我是浮動的 我也是居中的 CSS 代碼： .box{ float:left;...

    fevin 評論0 收藏0

發(fā)表評論

0條評論

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