成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

垂直居中方法檢測

Winer / 1764人閱讀

摘要：使用和屬性注意兼容到并且需要給一個高度。優(yōu)點(diǎn)中的內(nèi)容不用固定。方法方法三方法四單行文本垂直居中

1、使用table和tabel-cell屬性
html


    

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

html,body{
    height: 100%;
}
.wrapper{
    display: table;
    height: 100%;
}
.cell{
    display: table-cell;
    vertical-align: middle;
}

注意：兼容到ie8,并且wrapper需要給一個高度。優(yōu)點(diǎn)：cell中的內(nèi)容不用固定。

2、方法2
html


    

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper2{
    position: relative;
    height: 100%;
}
.wrapper2 .content{
    position: absolute;
    top: 50%;
    left: 0;
    height: 200px;
    overflow: auto;
    margin-top: -100px;
}

3、方法三
html


    

    

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper3{
    height: 100%;
}
.wrapper3 .floater{
    float: left;
    height: 50%;
    margin-bottom: -120px;
    border: 1px solid #00ff00;
}
.wrapper3 .content{
    clear: both;
    height: 240px;
    position: relative;
}

4、方法四
html


    

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

 .wrapper4{
    position: relative;
    height: 100%;
}
.wrapper4 .content{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 70%;
    height: 240px;
}

5、單行文本垂直居中
html


        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh

css

.wrapper5{
    line-height: 100px;
}

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111108.html

相關(guān)文章

  • css - 收藏集 - 掘金

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

    phpmatt 評論0 收藏0

  • 總結(jié)的一些JavaScript的冷知識

    摘要：例如要刪除數(shù)組的第個元素，可以使用這樣的語句不過對于大型數(shù)組來說，這個函數(shù)的效率可能不高?？蛇x參數(shù)可以限制被分割的片段數(shù)量。看代碼吧下面的代碼利用的來實(shí)現(xiàn)垂直居中和水平居中轉(zhuǎn)自快樂人生，積極進(jìn)取總結(jié)的一些的冷知識 1、!!將一個值方便快速轉(zhuǎn)化為布爾值 console.log( !!window===true ); 2、不聲明第三個變量實(shí)現(xiàn)交換 var a=1,b=2; a=[b...

    lingdududu 評論0 收藏0

  • 一些面試時關(guān)于 CSS 的問題

    摘要：可以試試去掉的會發(fā)生很奇妙的事呢附加關(guān)于子元素設(shè)置為而引發(fā)的問題。附加關(guān)于開啟硬件加速提升網(wǎng)站動畫渲染性能問題。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 1. 水平垂直居中問題 這可以說是最經(jīng)典的問題了，水平垂直居中，這個問題從入門前端一直到面試，甚至到工作之后都會時不時遇到，最近的面試也被問過這之類的問題，這里還是好好總結(jié)一番，以作備忘。公用 HTML 部分： ...

    HackerShell 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

    scwang90 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

    Lsnsh 評論0 收藏0

發(fā)表評論

0條評論

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