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

資訊專欄INFORMATION COLUMN

CSS 水平居中

zhaofeihao / 2890人閱讀

摘要：零散的知識不整理進入自己的知識框架太容易忘，對于腦子里零零散散的整理自勉水平居中塊級元素水平居中此居中的方法前提為居中塊級元素寬度必須固定才可設(shè)置自動計算左右補白可見塊的設(shè)置為后實現(xiàn)水平居中，但是設(shè)置為確并不能垂直居中特點瀏覽器兼容

零散的知識不整理進入自己的知識框架太容易忘，對于CSS腦子里零零散散的！整理自勉！

水平居中 塊級元素水平居中 margin：auto

此居中的方法前提為居中塊級元素寬度必須固定才可設(shè)置auto自動計算左右補白

   .block1{
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2{
        height: 100px;
        width: 100px;
        margin: auto;
        background: red;
    }

可見塊2的margin-left,margin-right設(shè)置為auto后實現(xiàn)水平居中，但是margin-top,margin-bottom設(shè)置為auto確并不能垂直居中！
特點：瀏覽器兼容性強，但擴展性差，無法自適應(yīng)未知項情況

text-align:center

text-align 屬性規(guī)定元素中的文本的水平對齊方式！顯然不是用來給塊級元素水平居中的，不過可設(shè)置塊級元素為行內(nèi)塊級元素時便可實現(xiàn)水平居中

 .block1 {
        height: 300px;
        width: 600px;
        background: black;
        text-align: center;
    }
    
    .block2 {
        height: 100px;
        display: inline-block;
        background: red;
    }


    
11111111111

特點：擴展性強，但需要額外處理inline-block的瀏覽器兼容性
注：該種方法可以讓display為inline/inline-block/inline-table/inline/flex值的子元素居中

position:absolute

通過設(shè)置子元素為絕對定位元素還有l(wèi)eft和margin-left的值可以達到居中效果

 .block1 {
        height: 300px;
        width: 600px;
        position: relative;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background: red;
    }

特點： 必須知道子元素的寬度才能設(shè)置左邊補白的負值
注：網(wǎng)上有說法可以通過和float來實現(xiàn)不定寬度塊級元素居中（還未深究）

CSS3 flex實現(xiàn)水平居中方法

Flex主要用來布局！ Flex布局，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。后面整理flex布局筆記！

  .block1 {
        height: 300px;
        width: 600px;
        display: flex;
        justify-content: center;
        background: black;
    }
    
    .block2 {
        height: 100px;
        background: red;
    }
  

    
1123123

特點：實現(xiàn)便捷，擴展性強但兼容需要考慮

CSS3 width:fit-content

width:fit-content可以實現(xiàn)元素收縮效果的同時，保持原本的block水平狀態(tài)，于是，就可以直接使用margin:auto實現(xiàn)元素向內(nèi)自適應(yīng)同時的居中效果了

  .block1 {
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        background: red;
    }
 

    
1123123

特點：擴展性強，但兼容性差;

float

浮動居中有待好好研究！
特點：兼容性強，擴展性強！但實現(xiàn)原理較復雜

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

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

相關(guān)文章

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

    cc17 評論0 收藏0

  • CSS居中完全指南——構(gòu)建CSS居中決策樹

    摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

    AlienZHOU 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    csRyan 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    Simon 評論0 收藏0

  • css-元素居中

    摘要：一水平居中行內(nèi)元素水平居中使用屬性可以實現(xiàn)在行內(nèi)元素包括在塊級父元素水平居中。使用負已知高度寬度使用使用使用三水平垂直居中公共結(jié)構(gòu)塊級元素垂直居中。 本文重要是匯總了關(guān)于水平居中，垂直居中，還有水平垂直居中的各種方法。 一、水平居中 1.行內(nèi)元素水平居中 使用text-align:center;屬性可以實現(xiàn)在行內(nèi)元素（包括：inline,inline-block、inline-tabl...

    miqt 評論0 收藏0

  • CSS/CSS3 實現(xiàn) 居中（水平&垂直）

    摘要：，水平居中行內(nèi)元素把行內(nèi)元素放在一個屬性塊元素中，然后設(shè)置父層元素屬性居中，水平居中塊狀元素設(shè)置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設(shè)置父層元素屬性居中，水平居中多個塊狀元素布局實現(xiàn)把塊狀元素的父元素屬性和，如下設(shè)置， 1，水平居中：行內(nèi)元素 把行內(nèi)元素放在一個屬性塊（display：block）元素中，然后設(shè)置父層元素屬性居中： .test { text-align:ce...

    genedna 評論0 收藏0

發(fā)表評論

0條評論

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