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

資訊專欄INFORMATION COLUMN

css對齊方案總結(jié)

marek / 1346人閱讀

摘要：核心代碼利用布局利用布局，其中用于設(shè)置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項在容器的當(dāng)前行的側(cè)軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼

css對齊方案總結(jié)

垂直居中

通用布局方式(內(nèi)斂元素和塊狀元素都適用)

  1. 利用flex:
    核心代碼:

    1
    2
    3
    4
    5
    		 
    .container{
        display:flex;
         flex-direction:column;
         justify:center
    }

  2. 利用transformX(-50%):
    核心代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 
    .container{
                width: 300px;
                height: 300px;
                background: red;
                position:relative;
            	}
    .child{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
     			}

內(nèi)斂元素的垂直居中

單行內(nèi)斂元素:設(shè)置內(nèi)斂元素的高度和行高相等
核心代碼:

1
2
3
4
 
.container {
    height: 120px;
    line-height: 120px;
}

?

塊狀元素

  1. 固定元素高度的塊狀元素
    核心代碼

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    .container{
        position: relative;
    }
    .child{
        position: absolute;
          top: 50%;
          height: 100px;
          margin-top: -50px; 
    }

  2. 未知高度的塊狀元素
    當(dāng)垂直居中的元素的高度和寬度未知時，我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。
    核心代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    		 
    .container {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

水平居中

通用布局方式

  1. flex布局
    核心代碼：

    1
    2
    3
    4
    		 
    .container{
    display: flex;  
                  justify-content: center;
    }

  2. absoulte+transform
    核心代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    		 
    .container{
    position:relative;
    }
    .child{
      position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
    }

內(nèi)斂元素水平居中

  1. text-align:center
    核心代碼: 
    1
    2
    3
    		 
    .container{
    text-align:center
    }

塊狀元素水平居中

  1. 使用 margin:0 auto 必須注明子元素和父元素的寬度
    核心代碼:

    1
    2
    3
    		 
    .container{
    margin:0 auto
    }

  2. 多塊狀元素：
    利用內(nèi)斂元素布局方式container屬性為text-align:center;
    核心代碼:

    1
    2
    3
    4
    5
    6
    		 
    .container{
    text-align: center;
    }
    .child{
    display: inline-block;
    }

水平垂直居中

固定寬高元素水平垂直居中

通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心代碼:

1
2
3
4
5
6
7
8
9
10
11
12
 
.container {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

?

未知寬高元素水平垂直居中

  1. 利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
    核心代碼：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

  2. 利用flex布局
    利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式。
    核心代碼：

    1
    2
    3
    4
    5
    		 
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

相對于 body 的水平垂直居中

  1. 列表布局(兼容性好)
    核心代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    		 
    .outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .middle {
        display: table-cell;
        vertical-align: middle;
    }

    .inner {
        margin-left: auto;
        margin-right: auto; 
        width: 400px;
    }

  2. position 布局
    核心代碼

    1
    2
    3
    4
    5
    6
    7
    8
    		 
    .container{
    	position: absolute;
    	margin: auto;
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	}

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

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

相關(guān)文章

  • CSS Tips------未知寬度高度居中對齊<三種最優(yōu)解決方案>

    摘要：前言無論是還是移動端開發(fā)我們經(jīng)常會遇到這樣一個問題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過實戰(zhàn)演練及資料搜索感覺以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布 前言 無論是pc還是移動端開發(fā),我們經(jīng)常會遇到,這樣一個問題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過實戰(zhàn)演練,...

    big_cat 評論0 收藏0

  • CSS Tips------未知寬度高度居中對齊<三種最優(yōu)解決方案>

    摘要：前言無論是還是移動端開發(fā)我們經(jīng)常會遇到這樣一個問題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過實戰(zhàn)演練及資料搜索感覺以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布 前言 無論是pc還是移動端開發(fā),我們經(jīng)常會遇到,這樣一個問題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過實戰(zhàn)演練,...

    selfimpr 評論0 收藏0

  • CSS Tips------未知寬度高度居中對齊<三種最優(yōu)解決方案>

    摘要：前言無論是還是移動端開發(fā)我們經(jīng)常會遇到這樣一個問題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過實戰(zhàn)演練及資料搜索感覺以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布 前言 無論是pc還是移動端開發(fā),我們經(jīng)常會遇到,這樣一個問題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過實戰(zhàn)演練,...

    alphahans 評論0 收藏0

  • css兩種垂直居中對齊解決方案

    第一種垂直居中方法 利用vertical-align：middle進(jìn)行垂直方向上的居中對齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開發(fā)中不能右浮動(不能靠右邊) 下方是完整代碼，可以新建一個HTML文件進(jìn)行測...

    elarity 評論0 收藏0

發(fā)表評論

0條評論

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