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

資訊專欄INFORMATION COLUMN

CSS之各種居中

Taste / 1862人閱讀

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

前言

在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個(gè)問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適用范圍太多了，而導(dǎo)致應(yīng)用時(shí)很難分清到底哪個(gè)有效。下面我就簡(jiǎn)單地梳理一下CSS的居中方法。

水平居中 1.行內(nèi)元素的水平居中

對(duì)于行內(nèi)元素（如text、link或inline-*元素）的水平居中：

.inline {
  text-align: center;
}

這種方法對(duì)于inline-block、inline-table等等都有效。

2.塊級(jí)元素的水平居中

對(duì)于塊級(jí)元素（如div、p等）的水平居中：

.block {
    margin: 0 auto;
}

這種方法就是把margin-left和margin-right設(shè)置成auto。但這種方法前提是你要設(shè)置好塊級(jí)元素的寬度，否則它的寬度就會(huì)鋪滿其父級(jí)元素。

3.多個(gè)塊級(jí)元素的水平居中

當(dāng)需要多個(gè)塊級(jí)元素在一行內(nèi)居中時(shí)，我們可以把它們?cè)O(shè)置為inline-block或者flex。

1）inline-block 
.inline-block-center {
    display: inline-block;
    text-align: right;
}
2）flexbox 
.flex-center {
  display: flex;
  justify-content: center;
}
垂直居中

垂直居中比水平居中要更加復(fù)雜，下面我會(huì)按照思考的過程來逐步梳理垂直居中的方法（包括不可行的方法）：

1）

既然塊級(jí)元素的水平居中可以使用margin: 0 auto，那么垂直居中能不能用margin: auto 0呢？不能。因?yàn)閙argin-top如設(shè)為auto，默認(rèn)值為0。

2）

OK，那我手動(dòng)利用calc指定margin-top

margin-top: calc(50%-50px);

這樣總行了吧？不行。因?yàn)閙argin-top的百分比竟然是以父元素的寬度為參照。

3)

好吧，那我用relative吧：

position: relative;
top: calc(50%-50px);

這次總歸行了。但是這種方法缺點(diǎn)就是元素的高度不能變。

4）

對(duì)于inline-element和table-cell，垂直居中同樣可以使用vertical-align:

display: table-cell;
vertical-align: middle;

但這時(shí)由于table-cell是inline，寬度將會(huì)變成和子元素一樣，而當(dāng)強(qiáng)制指定width為100%時(shí)，子元素高度會(huì)變成和父元素一樣。

5）

使用偽元素：


    垂直居中

.box {
  width: 400px;
  height: 300px;
  border:1px solid red;
  text-align:center;
}

.box:before {
  content:"";
  display:inline-block;
  height: 100%;
  vertical-align:middle;
}

.box span {
  vertical-align:middle;
}

這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。
那為什么添加偽元素在這里會(huì)有效呢？ 根據(jù)W3C標(biāo)準(zhǔn)對(duì)vertical-align的定義是：該屬性會(huì)影響由一個(gè)行內(nèi)級(jí)元素生成的盒的行框內(nèi)部的垂直定位。

那么偽元素在這里就是生成了一個(gè)空的100%高度的行內(nèi)盒，然后行內(nèi)元素以這個(gè)行內(nèi)盒為基線進(jìn)行垂直居中。

6)

使用flex布局：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
水平垂直居中

關(guān)于水平垂直居中，方法也有很多，很繁瑣。有些可以把水平居中的方法和垂直居中的方法結(jié)合（例如添加偽元素方法的text-align + vertical-align）,在這里我就不一一介紹，只是介紹一種最好的方法——幾乎萬能的flex布局：

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

justify-content影響flex-item在主軸上的位置；而align-item則會(huì)影響flex-item在交叉軸上的位置。

結(jié)語

以上的方法基本上可以用CSS完成各種情況的居中。如果讀者覺得有補(bǔ)充或者哪個(gè)地方講述錯(cuò)誤，歡迎指正。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115864.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之各種居中

    摘要：轉(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)垂直居中?！狫ames Anderson(https://twitter.co...

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

  • CSS之元素居中

    摘要：多個(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...

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

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

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

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

0條評(píng)論

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