移動端垂直居中字型偏上解決方案

2021-09-26 07:58:05 字數 525 閱讀 4281

當產品讓我們實現這麼乙個按鈕樣式

很顯然這個文字必須要垂直居中,但是兩端還要實現乙個半圓的效果,這時候我的實現方法是

.btn
下面我解釋一下為什麼要這麼做,首先字型大小也就是font-size: 30/@r;font-size其實就是字型的高度30那麼我又設定了乙個上下的padding:10,按鈕的圓角最小值應該是多少才合適呢?我們簡單的計算一下,字型高度的一半是15,我們又給了乙個上下的間距10那麼圓角的最小值就是25,但是我設定的是border-radius:30/@r;也就是30這個值,只要不低於25這個值都是可以的

說了一堆廢話,最關鍵的就是這個高度怎麼設定:按鈕的高度=字型的大小+padding的值,使用了padding我們就輕鬆地解決了很多移動端按鈕字型不居中的問題,其實字型是否居中白底黑字是看不出效果的只有當字型有了底紋或者是按鈕裡面的字,或者是帶有半圓的按鈕,可以採用這個方法

垂直居中的解決方案

下面是比較專業的垂直居中的集中解決方案。記錄於此,以便查閱。1 單行垂直居中 文字在層中垂直居中vertical align 屬性是做不到的.我們這裡有個比較巧妙的方法就是 設定height的高度與line height的高度相同 example source code www.52css.com ...

CSS垂直居中解決方案

博主回來了。本來在github上布了blog,後面換公司,部落格md檔案都忘記拿走了 乙個原先同學問我 css怎麼垂直居中呀 一看就沒好好學習過。盆友們可能有的只是需要 自己去拿吧 這是針對image的 我也懶得改了 我所知道的4種方式 其他的不是不行,而是我不常用 容器 父元素 line heig...

CSS垂直居中解決方案

應用的地方比較普遍,這裡有兩個赤裸裸的栗子 也有很多流行的方案,這裡只針對各種方案的適用場景來做一些分析 其實,垂直居中問題可以簡化成這樣 乙個容器html元素 container 乙個需要居中的html元素 center 特殊的情形下可能會出現body為 container,center是,此處不...