国产精品天干天干,亚洲毛片在线,日韩gay小鲜肉啪啪18禁,女同Gay自慰喷水

歡迎光臨散文網 會員登陸 & 注冊

CSS中關于元素居中的方法總結(超全)

2022-11-15 16:15 作者:doubleyong  | 我要投稿

css中一個很重要的問題,就是關于元素的居中,包括水平居中,垂直居中,本文就是為大家總結了:css中對于行內元素與塊級元素不同的居中方法.




一、行內元素


水平居中:



垂直居中:

1. 單行文本

height 與line-height 的高度相同時,可以實現(xiàn)垂直居中



2. 多行文本

方法1:


注:vertical-align 作用單元格時,才生效,所以一般會結合dispaly:table-cell;

?一起使用才有效果



示例:



方法2:



樣式重點分析:

1. 父級的標簽,高度和行高一致

p{

???height: 200px;

? ?line-height: 200px;

? border: 1px solid red;

? ?font-size: 16px;

}


2. 子標簽, 設置為行內塊級元素,垂直居中,且單獨設置行高

注:line-hight:1 ;?這里的1指與父級的字體大小相同,你可以可以直接寫具體的px

p span{

? ? ???display: inline-block;

? ? ? ?line-height: 1;

}



二、塊級元素


1. 水平居中

方法1:常規(guī)方法 -?定寬元素

    此方法缺點:內層元素必須設定(固定)寬度




    方法2:不定寬元素 - 絕對定位

    思路:

    1.外層絕對定位,內層相對定位,外層的外層相對定位?

    2.外層左浮動,內層左浮動

    3.外層右移50%,內層左移50%


    此方法有l(wèi)eft:50%, 在margin-left:負的寬度的一半,只是寬度不確定,所以就采用了position:relative; , right:50%; 而right:50%,其實就是向左移動寬度的一半,這里的百分比是以父級的寬度計算的



    2. 垂直居中


    方法1:

    設置父元素相對定位,子元素position: absolute;top: 50%;同時margin-top值為-(子元素高度的一半),因為設置top值時是相對于盒子頂部,所以想要居中還要往上移動半個盒子的高度才能實現(xiàn)。IE版本都可以兼容



    代碼如下:



    方法2:

    和上一種方法原理差不多,都是利用相對定位和絕對定位,有點不同是子元素內加上了transform:translateY(-50%);



    方法3:


    設置父元素為相對定位,子元素為絕對定位,同時設置子元素的top,bottom,left,right值為0,最后設置margin:auto;這能實現(xiàn)塊元素的垂直+水平居中,看代碼:



    總結


    還可以通過flex來實現(xiàn),水平居中和垂直,因為比較簡單本文就沒有介紹.



    參考文章:

    https://www.cnblogs.com/goloving/p/7657544.html

    https://blog.csdn.net/zhang_yu_ling/article/details/90272623

    https://blog.csdn.net/Simon9124/article/details/78935788



    茍有恒 , 何必三更眠五更起

    關注我,一起學習吧?


    CSS中關于元素居中的方法總結(超全)的評論 (共 條)

    分享到微博請遵守國家法律
    延长县| 镇原县| 增城市| 翁源县| 迁西县| 东乡族自治县| 偏关县| 简阳市| 玉龙| 沅陵县| 海宁市| 泌阳县| 安远县| 衡水市| 盐亭县| 岱山县| 陵水| 建始县| 藁城市| 汕尾市| 榆树市| 子洲县| 肇源县| 阿勒泰市| 岳阳市| 乌鲁木齐县| 南澳县| 海丰县| 全州县| 巴里| 调兵山市| 长寿区| 轮台县| 舒城县| 乐昌市| 临沂市| 渝中区| 离岛区| 如东县| 青岛市| 新泰市|