CSS居中對齊

XFLY 發布于2019-08-29 13:52 / 3397人閱讀

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

https://css-tricks.com/center...
https://segmentfault.com/a/11...

水平居中 子元素為行內元素

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

云服務器 GPU云服務器圖片html居中對齊 html居中對齊h html5行居中對齊 html居中css

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

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

《CSS世界》筆記三：內聯元素與對齊

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

HtmlCssJs 2019-08-29 16:19 評論0 收藏0
css對齊方案總結

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

marek 2019-04-23 11:45 評論0 收藏0
css兩種垂直居中對齊解決方案

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

elarity 2019-08-02 16:15 評論0 收藏0
css兩種垂直居中對齊解決方案

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

ztyzz 2019-08-29 18:46 評論0 收藏0
vertical-align屬性與垂直居中

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

bergwhite 2019-08-28 18:11 評論0 收藏0