成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

L - 居中布局

coolpail / 851人閱讀

摘要：水平居中先給出結(jié)構(gòu)我是子元素方法將子元素轉(zhuǎn)換為行內(nèi)元素將子元素設(shè)置為這樣既可以像塊元素一樣設(shè)置盒模型，又可以像行內(nèi)元素一樣試用進(jìn)行居中將子元素設(shè)置為后，子元素為塊級(jí)元素，寬度為內(nèi)容寬度方法將子元素轉(zhuǎn)換為元素是塊級(jí)元素，寬度自適

水平居中

先給出HTML結(jié)構(gòu)

    

        
我是子元素
方法1. 將子元素轉(zhuǎn)換為行內(nèi)元素 
    .par{
        text-align: center;
    }
    .child{
        background-color: tomato;
            
        display:inline-block;
    }

將子元素設(shè)置為inline-block這樣既可以像塊元素一樣設(shè)置盒模型，又可以像行內(nèi)元素一樣試用text-align：center進(jìn)行居中

將子元素設(shè)置為inline-block后，子元素為塊級(jí)元素，寬度為內(nèi)容寬度

方法2. 將子元素轉(zhuǎn)換為table 
    .par{

    }
    .child{
        background-color: tomato;
            
        display:table;
        margin:0 auto;
    }

table元素是塊級(jí)元素，寬度自適應(yīng)為內(nèi)容寬度，所以通過(guò)display:table對(duì)子元素進(jìn)行轉(zhuǎn)換并設(shè)置塊元素居中標(biāo)配margin:0 auto

方法3. 使用position+transform組合 
    .par{
        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }

由于子元素是個(gè)塊級(jí)元素(div)，默認(rèn)占滿父元素寬度，所以我們將子元素寬度設(shè)為300px

原理很簡(jiǎn)單，先用絕對(duì)定位將子元素置于距父元素左邊界一半的位置，然后再將子元素向左移動(dòng)自身的一半，達(dá)到居中效果

注意，position:relative將父元素設(shè)為子元素絕對(duì)定位的參照物

方法4. 利用flex布局的justify-content 
    .par{
        display:flex;
        justify-content: center;
    }
    .child{
        background-color: tomato;
    }

由于flex-grow屬性默認(rèn)值為0，flex-basis屬性默認(rèn)值為auto，所以寬度為內(nèi)容寬度(在沒(méi)有設(shè)置指定值時(shí)，否則為指定值)

順便說(shuō)一句，flex很強(qiáng)大

垂直居中

高度為元素高度，就不指定具體值了

方法1. 父元素轉(zhuǎn)換為table-ceil 
    .par{
        height:500px;

        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color: tomato;
    }

子元素寬度為內(nèi)容寬度，父元素寬度為子元素寬度

方法2. 利用position+transform組合 
    .par{
        height:500px;

        position: absolute;
    }
    .child{
        background-color: tomato;
        width:300px;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

不指定子元素寬度的話，子元素的內(nèi)容將縱向展示

方法3. 使用flex布局的align-items 
    .par{
        height:500px;

        display:flex;
        align-items:center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }
水平垂直居中

上述兩種居中布局的結(jié)合

方法1. 使用inline-block+text-align+table-cell+vertical-align 
    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        background-color: tomato;
        width:300px;

        display:inline-block;
    }
方法2. 利用position+transform組合 
    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
方法3. 使用flex布局 
    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        display:flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

有問(wèn)題歡迎提問(wèn)，實(shí)踐出真知

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

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

相關(guān)文章

  • 《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環(huán)繞）

    摘要：本篇主要記錄揭秘一書(shū)中后面幾章的常用技巧。文字環(huán)繞的重點(diǎn)在于即文字圍繞著路徑來(lái)顯示。本篇主要記錄《CSS3揭秘》一書(shū)中后面幾章的常用技巧。 1、偽元素?fù)Q行 先看下HTML代碼，如下 當(dāng)愛(ài)的故事剩聽(tīng)說(shuō) 我找不到你單純的面孔 默認(rèn)顯示效果： 一般情況下，我們喜歡直接在第一個(gè)span元素后面加個(gè)換行符，但是它對(duì)于語(yǔ)義來(lái)說(shuō)并不友好,或者將第一...

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

  • div+css圖片列表布局（一）

    摘要：接下來(lái)我會(huì)以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來(lái)講布局的方法布局非常簡(jiǎn)單，一般我會(huì)使用布局然后給每個(gè)元素定一個(gè)寬度并向左浮動(dòng)。是不是很簡(jiǎn)單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧 前端切圖的時(shí)候經(jīng)常會(huì)遇到圖片布局，初學(xué)者可能會(huì)比較生疏。接下來(lái)我會(huì)以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

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

  • div+css圖片列表布局（一）

    摘要：接下來(lái)我會(huì)以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來(lái)講布局的方法布局非常簡(jiǎn)單，一般我會(huì)使用布局然后給每個(gè)元素定一個(gè)寬度并向左浮動(dòng)。是不是很簡(jiǎn)單詳細(xì)代碼可以參考下一篇文章圖片列表布局二關(guān)注作者吧 前端切圖的時(shí)候經(jīng)常會(huì)遇到圖片布局，初學(xué)者可能會(huì)比較生疏。接下來(lái)我會(huì)以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

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

  • css - 收藏集 - 掘金

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

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

  • FE.CSS-理解Matrix,Flex,Grid

    摘要：理解中有這么幾個(gè)屬性方法斜拉縮放旋轉(zhuǎn)位移其實(shí)找到舊像素位置與新像素位置的關(guān)系就可以用表示。當(dāng)網(wǎng)格項(xiàng)目多于網(wǎng)格中的單元格或網(wǎng)格項(xiàng)目放置在顯式網(wǎng)格之外時(shí)，將創(chuàng)建隱式軌道。 理解transform:matrix matrix transform中有這么幾個(gè)屬性方法 skew(35deg)/*斜拉*/ scale(1, 0.5)/*縮放*/ rotate(45deg)/*旋轉(zhuǎn)*/ transl...

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

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

0條評(píng)論

coolpail

男|高級(jí)講師

TA的文章

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