摘要:總結(jié)垂直居中平時一直在用今天將各個類型總結(jié)一下通過寫些驗(yàn)證加深印象同時轉(zhuǎn)化成自己的理解的方式應(yīng)該還不完善以后遇到的話再補(bǔ)充吧。
定位方式居中
說明 上面方式?jīng)]有兼容性問題,也不用自己計算。
table-cell方式說明 table-cell方式兼容性比較好,但是外層標(biāo)簽不能設(shè)置定位或浮動,否則middle會失效。當(dāng)table-cell內(nèi)部是block元素時,middle也會生效。
內(nèi)聯(lián)方式說明 這種方式移動端支持較好,很好用,parent內(nèi)部無論是塊還是內(nèi)聯(lián)block熟悉都會生效。關(guān)于flex語法介紹。
總結(jié)垂直居中平時一直在用,今天將各個類型總結(jié)一下,通過寫些驗(yàn)證demo加深印象,同時轉(zhuǎn)化成自己的理解的方式,應(yīng)該還不完善,以后遇到的話再補(bǔ)充吧。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112415.html
摘要:前言我們在編寫馬過程中,想必大家對水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。 前言 我們在編寫馬過程中,想必大家對水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。 第一種方法 d第一種 .Centered1{ background-color: #800...
摘要:尤其是在實(shí)際頁面中,有很多特殊的場景,導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個的在一個水平垂直居中,用實(shí)現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。 相比較水平居中,垂直居中比較復(fù)雜點(diǎn)。尤其是在實(shí)際頁面中,有很多特殊的場景,導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例:一個200*2...
摘要:總結(jié)垂直居中平時一直在用今天將各個類型總結(jié)一下通過寫些驗(yàn)證加深印象同時轉(zhuǎn)化成自己的理解的方式應(yīng)該還不完善以后遇到的話再補(bǔ)充吧。 定位方式居中 .parent{ width: 60px; height: 60px; border: 1px solid palevioletred; ...
摘要:單行文本使用我是垂直居中文本使用我是垂直居中文本父元素子元素高度確定高度確定將設(shè)置為本元素高度的一半父元素子元素高度不確定我會絕對居中額外元素與上兩個原理一樣多設(shè)置了一個額外元素,使額外元素的為為元素的高度的負(fù)一半使用 1.單行文本使用line-height 我是垂直居中文本 //css child{ line-height: 100px; } 2.使用table-cell...
摘要:結(jié)構(gòu)效果如下優(yōu)點(diǎn)不用受內(nèi)容高度的限制,簡單實(shí)現(xiàn)垂直居中缺點(diǎn)不兼容方法二這個方法使用絕對定位的,把它的設(shè)置為,設(shè)置為負(fù)的高度。這意味著對象必須在中指定固定的高度。使用使塊級元素垂直居中是很簡單的。 方法一:把一些 div 的顯示方式設(shè)置為表格,因此我們可以使用表格的 vertical-align屬性。 結(jié)構(gòu)效果如下:http://jsfiddle.net/chic/4uduzb3t/1/...
閱讀 2305·2021-09-28 09:45
閱讀 3596·2021-09-24 09:48
閱讀 2256·2021-09-22 15:49
閱讀 3093·2021-09-08 16:10
閱讀 1586·2019-08-30 15:54
閱讀 2317·2019-08-30 15:53
閱讀 3012·2019-08-29 18:42
閱讀 2864·2019-08-29 16:19