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

資訊專欄INFORMATION COLUMN

CSS居中對齊

focusj / 1121人閱讀

摘要：水平居中子元素為行內(nèi)元素子元素為塊級元素多個塊級子元素垂直居中單行子元素空格不換行多行子元素可變換大小塊級子元素知道子元素高度不知道子元素高度水平垂直居中知道子元素的寬高子元素的沒有固定的寬高

https://css-tricks.com/center...
https://segmentfault.com/a/11...
水平居中 子元素為行內(nèi)元素 
.center-children {
  text-align: center;
}
子元素為塊級元素 
.center-me {
  margin: 0 auto;
}
多個塊級子元素 
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}
垂直居中 單行子元素 
.link {
  padding-top: 30px;
  padding-bottom: 30px;
}
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;  //空格不換行
}
多行子元素 
.center-table {
  display: table;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  resize: vertical;  //可變換大小
}
.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;
}
塊級子元素 知道子元素高度 
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
不知道子元素高度 
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.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;
}
子元素的沒有固定的寬高 
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
body, html {
  height: 100%;
  display: grid;
}
span {
  margin: auto;
}

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51546.html

相關(guān)文章

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

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

    HtmlCssJs 評論0 收藏0

  • css對齊方案總結(jié)

    摘要：核心代碼利用布局利用布局，其中用于設(shè)置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項在容器的當前行的側(cè)軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結(jié) 垂直居中 通用布局方式(內(nèi)斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

    marek 評論0 收藏0

  • css兩種垂直居中對齊解決方案

    第一種垂直居中方法 利用vertical-align：middle進行垂直方向上的居中對齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開發(fā)中不能右浮動(不能靠右邊) 下方是完整代碼，可以新建一個HTML文件進行測...

    elarity 評論0 收藏0

  • css兩種垂直居中對齊解決方案

    第一種垂直居中方法 利用vertical-align：middle進行垂直方向上的居中對齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開發(fā)中不能右浮動(不能靠右邊) 下方是完整代碼，可以新建一個HTML文件進行測...

    ztyzz 評論0 收藏0

  • vertical-align屬性與垂直居中

    摘要：方法二利用，設(shè)置元素結(jié)構(gòu)，并應(yīng)用實現(xiàn)垂直居中，這種方法的實現(xiàn)可用于多行文本，要求及以上版本。 讓元素居中對齊是非常常見的需求，首先是水平居中，要實現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可，對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發(fā)...

    bergwhite 評論0 收藏0

發(fā)表評論

0條評論

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