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

資訊專欄INFORMATION COLUMN

position:absolute的容器居中

Ku_Andrew / 1438人閱讀

摘要：頁面開發(fā)中，最經(jīng)常是使用的當(dāng)然要屬于容器居中啦，居中有時(shí)候是一個(gè)很簡(jiǎn)單的問題，但是有時(shí)候也讓人苦惱的牙癢癢代碼如下代碼不占據(jù)文檔流，水平居中如下代碼占據(jù)文檔流，水平居中如下那如果想要水平垂直居中的話，就要像下面這么寫啦代碼和代碼

web頁面開發(fā)中，最經(jīng)常是使用的當(dāng)然要屬于容器居中啦，“居中”有時(shí)候是一個(gè)很簡(jiǎn)單的問題，但是！有時(shí)候也讓人苦惱的“牙癢癢”！
HTML代碼如下：


    
child container

CSS代碼（不占據(jù)文檔流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

CSS代碼（占據(jù)文檔流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

那如果想要水平垂直居中的話，就要像下面這么寫啦~
HTML代碼和CSS代碼如下：

#content{
    position:absolute;
    width:650px;
    height:298px;
    left:50%;
    top:50%;
    margin-left:-325px;  /*設(shè)置為寬度的一半*/
    margin-top:-149px;   /*設(shè)置為高度的一半*/
    background-color: pink;
}


HELLO, WORLD!

但是，上面有一個(gè)需要注意的地方，就是如果#content有父容器，那么其父容器的position不能設(shè)置成relative，否則垂直居中會(huì)失效————我學(xué)的還不夠扎實(shí)，具體為什么會(huì)失效，我一下也將不出來，若以后長(zhǎng)知識(shí)了，我再不上去，或者‘米娜桑’有知道的，也可以貼出來~~

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

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

相關(guān)文章

  • CSS元素（文本、圖片）水平垂直居中方法

    摘要：上下左右負(fù)偽元素父容器上設(shè)置用于設(shè)置為行內(nèi)元素的水平居中居中元素自身設(shè)置用于設(shè)置為塊級(jí)元素的水平居中元素寬度固定，且不能浮動(dòng)絕對(duì)定位? 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

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

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

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

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

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

  • 如何居中一個(gè)元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客 一、水平居中 1.行內(nèi)元素水平居...

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

  • 垂直水平居中方法小結(jié)

    摘要：前言最近看到很多面試題目會(huì)問請(qǐng)說出幾種使用完成垂直水平居中的方法正好看基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小結(jié)。具體代碼如下使用完成垂直水平居中該方法的核心思想是使用表格來實(shí)現(xiàn)垂直居中，再使用來實(shí)現(xiàn)水平居中。 前言：最近看到很多面試題目會(huì)問：請(qǐng)說出幾種使用css完成垂直水平居中的方法？正好看css基礎(chǔ)的時(shí)候看到一篇文章是講完全居中的，這邊對(duì)于文章中的內(nèi)容做個(gè)小...

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

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

0條評(píng)論

閱讀需要支付1元查看
<