亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

前端開(kāi)發(fā)常用css居中布局

Mike617 / 1508人閱讀

摘要：必不可少，這是其一，還有一種這些都是常用的居中方式，在中，還可以使用彈性布局來(lái)居中元素，下篇文章在詳細(xì)說(shuō)明。

在前端開(kāi)發(fā)中，經(jīng)常會(huì)碰到布局需要左右居中，上下居中的情況，在現(xiàn)代瀏覽器中實(shí)現(xiàn)居中還是挺方便的，本文只考慮在高版本現(xiàn)代瀏覽器中的情況，不考慮IE.

1.文本居中屬性 text-align

這是常用的水平居中圖片，按鈕，文字等行內(nèi)元素的方法，但不能上下居中




    

        

            abcedd

實(shí)現(xiàn)效果：

2.自動(dòng)居中 margin:auto 
此方法也只能實(shí)現(xiàn)水平居中，具體用法為：margin:0 auto

    .sub {
        width: 200px;
        height: 200px;
        background: red;
        margin: 0 auto;
    }

實(shí)現(xiàn)效果：

3. 用line-height實(shí)現(xiàn)文字上下居中 
    .sub {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        line-height: 200px;
        text-align: center;
    }

4.表格居中

如果使用表格居中的話，用表格屬性 td(也可能會(huì)用到 th)元素的 align="center" 以及 valign="middle" 就可以實(shí)現(xiàn)左右上下居中了

5.使用display:table-cell來(lái)居中

對(duì)于不是表格的元素，可以使用display:table-cell模擬表格，實(shí)現(xiàn)居中的目的。這種情況下，父級(jí)容器要指定寬度，用百分比的話達(dá)不到左右居中的目的
6.使用定位position

要注意的是。margin:auto必不可少，這是其一，還有一種

這些都是常用的居中方式，在css3中，還可以使用彈性布局來(lái)居中元素，下篇文章在詳細(xì)說(shuō)明。

轉(zhuǎn)自：http://dawns.me/2017/07/04/ht...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50971.html

相關(guān)文章

  • 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的人還專(zhuān)門(mén)成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

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

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫(xiě)，簡(jiǎn)稱(chēng)為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開(kāi)發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評(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元查看
<