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

<tfoot id="aqioq"></tfoot>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/【CSS篇】css居中解決辦法

【CSS篇】css居中解決辦法

appetizerio 發布于2019-08-30 15:53 / 922人閱讀

摘要：水平居中行內元素適用元素塊級元素適用于元素一個塊級元素多個塊級元素方法一將塊級元素變為行內塊級元素部分部分方法二布局部分部分垂直居中行內元素單個行內元素情況一當或文本有包裹元素時，設置相等的上下情況二當或

水平居中

【行內元素】適用inline,inline-block,inline-table,inline-flex元素

.center {
  text-align: center;
}

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

①一個塊級元素

   .center {
 margin: 0 auto;
   }

②多個塊級元素

方法一：將塊級元素變為行內塊級元素

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;
}

垂直居中

【行內元素】

①單個行內元素：

情況一：當link或文本有包裹元素時，設置相等的上下padding

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

情況二：當link或文本沒有包裹時，設置行高和高度相等

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

②多個行內元素：

方法一：將多個行內元素分別置于table-cell中

html部分:

  

  1

  

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


方法二：將父元素設置為display:table,將自身設置為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;/*父容器必須有固定高度*/
}


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

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;
}

【塊級元素】

①已知元素高度(絕對定位+負的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;
}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116583.html

前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
朝花夕拾：CSS居中完全指南

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

laznrbfe 2019-08-29 13:45 評論0 收藏0
老生常談之CSS的垂直居中

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

CompileYouth 2019-08-30 15:55 評論0 收藏0
CSS進階篇--CSS讓浮動元素水平居中

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

fevin 2019-08-28 18:17 評論0 收藏0