摘要:公司一個(gè)頁(yè)面中的一個(gè)樣式如下,使左邊文字豎直排列且水平垂直居中代碼已中止一般情況,我會(huì)用如上或者用使文字豎直排放看起來(lái)居中,但是這樣不夠智能或顯得比較冗余。
公司一個(gè)頁(yè)面中的一個(gè)樣式如下,使左邊文字豎直排列且水平垂直居中:
代碼:
已中止
.left-tit{ width: 30px; height: 158px; border-radius: 5px 0 0 5px; text-align: center; font-size: 14px; color: #fff; letter-spacing: 4px; background: #eb5c5e; padding-top: 50px; padding-left: 5px; }
一般情況,我會(huì)用padding(如上)或者用position+transform+margin使文字豎直排放看起來(lái)居中,但是這樣不夠智能或顯得比較冗余。
偶然發(fā)現(xiàn),其實(shí)用line-height就能不用具體控制padding數(shù)值,也不用多加代碼而完美實(shí)現(xiàn)。
改善代碼如下:
已中止
.left-tit{ width: 30px; line-height: 158px; border-radius: 5px 0 0 5px; text-align: center; font-size: 14px; color: #fff; background: #eb5c5e; } .left-tit span{ line-height: 1.2; display: inline-block; vertical-align: middle; width: 14px; }
主要:設(shè)置外層line-height及內(nèi)部span為inline-block;兩點(diǎn)結(jié)合真的是挺巧妙的,line-height撐開盒子高度并保證文字垂直居中, inline-block使得元素具有內(nèi)聯(lián)元素特性而水平居中,同時(shí)又具有塊級(jí)元素的特性能夠設(shè)置寬度。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116535.html
摘要:公司一個(gè)頁(yè)面中的一個(gè)樣式如下,使左邊文字豎直排列且水平垂直居中代碼已中止一般情況,我會(huì)用如上或者用使文字豎直排放看起來(lái)居中,但是這樣不夠智能或顯得比較冗余。 公司一個(gè)頁(yè)面中的一個(gè)樣式如下,使左邊文字豎直排列且水平垂直居中:showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼: 已中止 .left-tit{ wi...
摘要:項(xiàng)目使用了,所以就不直接操作了,而是直接操作數(shù)組。為了避免往數(shù)組中重復(fù)數(shù)據(jù),利用了不能含有重復(fù)元素的特性來(lái)去重當(dāng)然,重復(fù)添加自己也是會(huì)處理的,也可以使用數(shù)組的方法判斷。當(dāng)然,使用數(shù)組,也可以對(duì)每個(gè)移除項(xiàng),使用或方法。 前幾天看了看ES6的一些知識(shí),正好今天做項(xiàng)目的時(shí)候就用上了Set的一個(gè)特性,現(xiàn)在分享給和我一樣的新手。目的就是點(diǎn)擊某個(gè)checkbox,實(shí)現(xiàn)checkall的效果。項(xiàng)目使...
摘要:關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題,看了網(wǎng)上諸多方法,今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。問(wèn)題一個(gè)最簡(jiǎn)單的結(jié)構(gòu)如下,請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。缺點(diǎn),和方法一樣,會(huì)出現(xiàn)空白間隙,解決方案如上,因?yàn)槭切袃?nèi)元素,所以不能設(shè)置寬高,比較局限。 關(guān)于水平導(dǎo)航已然是老生常談之問(wèn)題,看了網(wǎng)上諸多方法,今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。 問(wèn)題:一個(gè)最簡(jiǎn)單的html結(jié)構(gòu)如下,請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。 ...
摘要:并且,一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見(jiàn)的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個(gè)冒號(hào)例如。就本文而言,我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。 作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅:love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...
摘要:切換一直是頁(yè)面之中主要的結(jié)構(gòu),最近在寫的項(xiàng)目,想到可不可以不用和做控制,實(shí)現(xiàn)純和的切換。頁(yè)面交換的原理無(wú)非是利用標(biāo)簽的屬性在顯示與否之間的切換。再之后利用的的選擇器就可以關(guān)聯(lián)上要切換的頁(yè)面了。這里直接利用了絕對(duì)定位的方法。 tab切換一直是頁(yè)面之中主要的結(jié)構(gòu),最近在寫vue的spa項(xiàng)目,想到可不可以不用href和js做控制,實(shí)現(xiàn)純css和html的tab切換。 tab頁(yè)面交換的原理無(wú)...
閱讀 2164·2021-11-11 16:55
閱讀 1684·2019-08-30 15:54
閱讀 2817·2019-08-30 15:53
閱讀 2211·2019-08-30 15:44
閱讀 1152·2019-08-30 15:43
閱讀 964·2019-08-30 11:22
閱讀 1942·2019-08-29 17:20
閱讀 1566·2019-08-29 16:56