CSS篇之巧用line-height

dendoink 發(fā)布于2019-08-30 15:53 / 2824人閱讀

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

公司一個頁面中的一個樣式如下，使左邊文字豎直排列且水平垂直居中：

代碼：

已中止

.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;
}

一般情況，我會用padding（如上）或者用position+transform+margin使文字豎直排放看起來居中，但是這樣不夠智能或顯得比較冗余。

偶然發(fā)現(xiàn)，其實用line-height就能不用具體控制padding數(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；兩點結(jié)合真的是挺巧妙的，line-height撐開盒子高度并保證文字垂直居中， inline-block使得元素具有內(nèi)聯(lián)元素特性而水平居中，同時又具有塊級元素的特性能夠設(shè)置寬度。

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116535.html

相關(guān)文章

CSS篇之巧用line-height

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

hsluoyz 2019-08-01 16:23 評論0 收藏0
新手必看：ES6使用之巧用Set為數(shù)組去重

摘要：項目使用了，所以就不直接操作了，而是直接操作數(shù)組。為了避免往數(shù)組中重復(fù)數(shù)據(jù)，利用了不能含有重復(fù)元素的特性來去重當(dāng)然，重復(fù)添加自己也是會處理的，也可以使用數(shù)組的方法判斷。當(dāng)然，使用數(shù)組，也可以對每個移除項，使用或方法。前幾天看了看ES6的一些知識，正好今天做項目的時候就用上了Set的一個特性，現(xiàn)在分享給和我一樣的新手。目的就是點擊某個checkbox,實現(xiàn)checkall的效果。項目使...

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

摘要：關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對比了一下現(xiàn)有方法的優(yōu)缺點。問題一個最簡單的結(jié)構(gòu)如下，請實現(xiàn)水平導(dǎo)航。缺點，和方法一樣，會出現(xiàn)空白間隙，解決方案如上，因為是行內(nèi)元素，所以不能設(shè)置寬高，比較局限。關(guān)于水平導(dǎo)航已然是老生常談之問題，看了網(wǎng)上諸多方法，今天小小的總結(jié)對比了一下現(xiàn)有方法的優(yōu)缺點。問題：一個最簡單的html結(jié)構(gòu)如下，請實現(xiàn)水平導(dǎo)航。 ...

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

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

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

摘要：切換一直是頁面之中主要的結(jié)構(gòu)，最近在寫的項目，想到可不可以不用和做控制，實現(xiàn)純和的切換。頁面交換的原理無非是利用標(biāo)簽的屬性在顯示與否之間的切換。再之后利用的的選擇器就可以關(guān)聯(lián)上要切換的頁面了。這里直接利用了絕對定位的方法。 tab切換一直是頁面之中主要的結(jié)構(gòu)，最近在寫vue的spa項目，想到可不可以不用href和js做控制，實現(xiàn)純css和html的tab切換。 tab頁面交換的原理無...

DevTTL 2019-08-29 12:29 評論0 收藏0