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

資訊專欄INFORMATION COLUMN

CSS之元素居中

wapeyang / 3468人閱讀

摘要：多個(gè)塊級(jí)元素按行放置將塊級(jí)元素設(shè)置為行內(nèi)元素父元素內(nèi)容居中。塊級(jí)元素使用絕對(duì)定位。需要知道子元素的高度。水平垂直居中思路跟之前一樣。

水平方向 行內(nèi)元素 
.center-children {
  text-align: center;
}

適用于行內(nèi)元素，行內(nèi)塊元素。

塊級(jí)元素 
.center-children {
  margin: 0 auto;
}

margin左右設(shè)置為auto，前提條件：元素本身需要設(shè)置寬度。

多個(gè)塊級(jí)元素 按行放置 
.center-children{
  display:inline-block;
}
.center{
  text-align: center;
}

將塊級(jí)元素設(shè)置為行內(nèi)元素,父元素內(nèi)容居中。
還有一種方法是用flex，但只能兼容IE10+。

按列放置

與塊級(jí)元素一樣，只是設(shè)置多個(gè)塊級(jí)元素。

垂直 行內(nèi)元素 
.center-children {
  padding-top: 30px;
  padding-bottom: 30px;
}

這里設(shè)置上下padding一樣。只能用于單行的行內(nèi)元素。

.center-children {
  height: 100px;
  line-height: 100px;
}

行高與高度相等。

多個(gè)行內(nèi)元素 
.center{
  display:table;
}
.center-children{
  display:table-cell;
  vertical-align:middle; 
}

父元素設(shè)置為table，子元素設(shè)置為table-cell。垂直居中。

.center{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

直接使用flex，注意兼容性。

塊級(jí)元素 
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

使用絕對(duì)定位。需要知道子元素的高度。

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

使用絕對(duì)定位。不需要知道子元素的高度。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
使用flex。

水平垂直居中 
.parent {
  position: relative;
}

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

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

  margin: -70px 0 0 -170px;
}

思路跟之前一樣。使用絕對(duì)定位。需要知道高度。

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

使用絕對(duì)定位。不需要知道高度。

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

使用flex。

總結(jié)

以上是頁面布局中，經(jīng)常需要用到的各種居中方法，網(wǎng)上也有很多技巧，這里就簡(jiǎn)單的總結(jié)歸納，用到時(shí)可以選用合適的方案。總體來說，在兼容性（兼容IE10以上）允許的條件下，優(yōu)先選擇flex方法，實(shí)現(xiàn)簡(jiǎn)單。

參考

http://howtocenterincss.com/
https://css-tricks.com/center...

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

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

相關(guān)文章

  • CSS之各種居中

    摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中，居中這個(gè)問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語以上的方法基本上可以用完成各種情況的居中。 前言 在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個(gè)問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

    Labradors 評(píng)論0 收藏0

  • CSS之各種居中

    摘要：前言在我看來，入門的路上最煩人的就是的各種居中了。在我初學(xué)過程中，居中這個(gè)問題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語以上的方法基本上可以用完成各種情況的居中。 前言 在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個(gè)問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

    Taste 評(píng)論0 收藏0

  • CSS之各種居中

    摘要：轉(zhuǎn)自個(gè)人博客本博客討論居中情況設(shè)定為總寬度不定內(nèi)容寬度不定的情況。改變大小時(shí)，仍然居中。寬高改變時(shí)，不再是居中效果。配合優(yōu)點(diǎn)居中元素不對(duì)其他元素產(chǎn)生影響。水平居中當(dāng)父元素設(shè)置時(shí)，子元素為，默認(rèn)為內(nèi)容寬度。 轉(zhuǎn)自個(gè)人博客 本博客討論居中情況設(shè)定為總寬度不定,內(nèi)容寬度不定的情況。（改變大小時(shí)，仍然居中）。 特別說明：在元素設(shè)置position:absolute;來設(shè)置居中效果時(shí)，除去博客...

    happyfish 評(píng)論0 收藏0

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

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

    CompileYouth 評(píng)論0 收藏0

  • CSS系列之讓元素居中

    摘要：輔助標(biāo)簽代碼代碼效果廢話要讓元素和輔助元素在一行，否則會(huì)出現(xiàn)水平不完全居中，當(dāng)使用時(shí)，換行會(huì)被解析成空格。 首先我們需要知道元素都有哪些種類？ 內(nèi)嵌元素（display:inline;）如a，span，b，i 【一個(gè)不可定制的盒子】 [默認(rèn)同行可以繼續(xù)跟同類型標(biāo)簽] [內(nèi)容撐開寬度] [不支持寬高] [不支持上下的margin和padding] [代碼換行會(huì)被解析成空] 塊...

    fou7 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<