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

資訊專欄INFORMATION COLUMN

布局中常見的居中問題

1fe1se / 1534人閱讀

摘要：說到布局除了浮動以及定位外還有一個不得不提的點，那就是居中，居中問題我們在網頁布局當中經常遇到，那么以下就是分為兩部分來講，一部分是傳統的居中，另一種則是居中，每個部分又通過分為水平垂直居中來講。參考參考學習布局視覺格式化模型居中詳解

說到布局除了浮動以及定位外還有一個不得不提的點，那就是居中，居中問題我們在網頁布局當中經常遇到，那么以下就是分為兩部分來講，一部分是傳統的居中，另一種則是flex居中，每個部分又通過分為水平垂直居中來講。

一、傳統居中方式

1.1水平居中

1.1.1 inline

對于inline元素以及純文本只需要為父元素設置text-align: center;適用于 inline, inline-block, inline-table, inline-flex

1.1.2 block

對于block元素則需要為想要居中的block設置margin: 0 auto;

1.1.3 more-block：

多個塊級元素直接居中同單個塊級居中一樣，但是如果要在單行內居中，需要先通過display: inline-block將塊級元素轉化為行內塊元素再按照行內元素為父元素添加text-align: center的居中方式居中。

1.2垂直居中

1.2.1 inline

單行情況下,可以為父元素設置相同的上下padding實現居中

如果只是單行文字也可以設置行高等于父元素高度實現居中

如果設置上下相同padding沒有用的話，可能該元素是表格，可以使用vertical-align: middle設定對齊基線為middle實現居中。

1.2.2 block

要居中的元素高度固定的情況下，可以使用position來定位，設置top為50%，但是因為top是盒子上邊界的定位距離，所以還要通過負值的margin-top往回拉寬度的一半。

(以下只寫核心代碼，其他寬度高度border自己加)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

但是如果高度不固定的話則可使用變換來替換margin負值達到動態高度的一半

// 只需要替換上面的margin-top: -50px; height可以直接去掉了
transform: translateY(-50%);

1.3水平垂直都居中

1.3.1 固定寬高

固定寬高下，同垂直居中方法一樣，也是絕對定位50%然后通過margin負值拉回去

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%; 
  margin: -50px 0 0 -50px; // 寬高為100px
}

?
此為還有一種方法也可以實現已知寬高時候的居中

// 此處如果是不定寬高的話就會child鋪滿整個父元素
.child {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

1.3.2 不固定寬高

// 同樣是替換margin負值
transform: translate(-50%, -50%);

?

二、Flex居中方式

Flex的出現解決了傳統居中方式難以實現的麻煩，僅需要幾行代碼就可以實現居中，Flex布局不僅能用于居中，在其他布局當中也相當的有效。想要啟動Flex只要在父元素設置display： flex,內聯元素的話則是display: inline-flex.

2.1 水平居中

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

2.2 垂直居中

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

2.3 水平垂直居中

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

此外，如果想要實現豎著排列flex實現也很容易，僅需要換一下主軸方向，多添加一行就行了。

.parent {
  flex-direction: column;
}


?

參考

?
學習CSS布局
?
視覺格式化模型
?
css-tricks:居中詳解

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

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

相關文章

  • 前端-CSS3&H5

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

    xiaolinbang 評論0 收藏0

  • CSS常見布局與居中

    摘要：常用于控制頁面布局的定位機制普通流相對定位絕對定位和固定定位。左右布局最常用的就是通過浮動左浮或右浮來實現浮動。可以通過設置左右的外邊距為值來居中包括圖片。 這里，就CSS左右布局，左中右布局，水平與垂直居中，進行討論。 CSS常用于控制頁面布局的定位機制：普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。 1.左右布局 最常用的就是通過浮動（左浮或右浮）來實...

    April 評論0 收藏0

  • CSS常見布局解決方案

    摘要：到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實現方式多種多樣。主要就使用從很久很久以前起，我們就拋棄了布局頁面，但是異常強大等屬性目前兼容性較差傲嬌的程序員應該放棄太低版本的瀏覽器轉自常見布局解決方案 水平居中布局 1.margin + 定寬 Demo .child { width: 100px; margin: 0 auto; } ...

    Big_fat_cat 評論0 收藏0

發表評論

0條評論

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