CSS篇之巧用line-height

hsluoyz 發(fā)布于2019-08-01 16:23 / 3350人閱讀

摘要：公司一個(gè)頁(yè)面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會(huì)用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。

公司一個(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使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。

偶然發(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è)置寬度。

云服務(wù)器 GPU云服務(wù)器巧用CSS的MASK濾鏡 line-height 巧用巧用云服務(wù)器

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

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

相關(guān)文章

CSS篇之巧用line-height

摘要：公司一個(gè)頁(yè)面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中代碼已中止一般情況，我會(huì)用如上或者用使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。公司一個(gè)頁(yè)面中的一個(gè)樣式如下，使左邊文字豎直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代碼：已中止 .left-tit{ wi...

dendoink 2019-08-30 15:53 評(píng)論0 收藏0
新手必看：ES6使用之巧用Set為數(shù)組去重

摘要：項(xiàng)目使用了，所以就不直接操作了，而是直接操作數(shù)組。為了避免往數(shù)組中重復(fù)數(shù)據(jù)，利用了不能含有重復(fù)元素的特性來去重當(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)目使...

zhichangterry 2019-08-21 11:55 評(píng)論0 收藏0
CSS篇之水平導(dǎo)航

摘要：關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎ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ǎng)上諸多方法，今天小小的總結(jié)對(duì)比了一下現(xiàn)有方法的優(yōu)缺點(diǎn)。問題：一個(gè)最簡(jiǎn)單的html結(jié)構(gòu)如下，請(qǐng)實(shí)現(xiàn)水平導(dǎo)航。 ...

李義 2019-08-29 11:19 評(píng)論0 收藏0
CSS（一）偽元素的巧用

摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個(gè)冒號(hào)例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...

entner 2019-08-30 15:53 評(píng)論0 收藏0
巧用css實(shí)現(xiàn)無js的tab切換

摘要：切換一直是頁(yè)面之中主要的結(jié)構(gòu)，最近在寫的項(xiàng)目，想到可不可以不用和做控制，實(shí)現(xiàn)純和的切換。頁(yè)面交換的原理無非是利用標(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è)面交換的原理無...

DevTTL 2019-08-29 12:29 評(píng)論0 收藏0