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

資訊專欄INFORMATION COLUMN

記錄一下自己常用的兩種簡(jiǎn)單實(shí)現(xiàn)水平垂直居中的方法

Soarkey / 1758人閱讀

摘要：實(shí)現(xiàn)水平垂直居中通過(guò)實(shí)現(xiàn)水平垂直居中主要依賴于和決定了子元素的水平位置設(shè)置即可實(shí)現(xiàn)子元素的水平居中決定了子元素的垂直位置設(shè)置即可實(shí)現(xiàn)子元素的垂直居中，這里需要設(shè)置元素高度和實(shí)現(xiàn)水平垂直居中另一種簡(jiǎn)單實(shí)現(xiàn)水平垂直居中的方

display:flex 實(shí)現(xiàn)水平垂直居中

通過(guò)display:flex實(shí)現(xiàn)水平垂直居中主要依賴于justify-content和align-items
justify-content決定了子元素的水平位置,設(shè)置justify-content:center即可實(shí)現(xiàn)子元素的水平居中
align-items決定了子元素的垂直位置,設(shè)置align-items:center即可實(shí)現(xiàn)子元素的垂直居中，這里需要設(shè)置元素高度

        .container {
            display: flex;
            height: 100%;
            width: 100%;
            background-color: #f0f0f0;
            justify-content: center;
            align-items: center;
        }
text-align:center和line-height實(shí)現(xiàn)水平垂直居中

另一種簡(jiǎn)單實(shí)現(xiàn)水平垂直居中的方法就是利用text-align:center實(shí)現(xiàn)元素的水平居中，以及通過(guò)設(shè)置元素的height和line-height相同來(lái)實(shí)現(xiàn)子元素的垂直居中

        .runningDuck {
            text-align: center;
            background-color: burlywood;
            height: 200px;
            line-height: 200px;
            width: 200px;
            color:white;
        }
實(shí)現(xiàn)效果

代碼 

    

    
        

            
水平垂直居中元素

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

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

相關(guān)文章

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開(kāi)發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

    張金寶 評(píng)論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開(kāi)發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶界面中項(xiàng)目的標(biāo)題。 閑話圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

    huangjinnan 評(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

  • CSS及布局

    摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開(kāi)發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看...

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

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

0條評(píng)論

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