資訊專欄INFORMATION COLUMN
摘要：?jiǎn)栴}來源在近期的項(xiàng)目中要實(shí)現(xiàn)圖中圓圈里面的數(shù)字垂直居中的效果解決思路方案在下會(huì)出現(xiàn)問題通過設(shè)置的高度等于父元素的高度一般會(huì)達(dá)到垂直居中的效果，但是在出現(xiàn)了問題方案在下會(huì)出現(xiàn)問題一般通過將父元素設(shè)置為子元素設(shè)置為也會(huì)達(dá)到居中的效果但
問題來源：
在近期的項(xiàng)目中要實(shí)現(xiàn)圖中圓圈里面的數(shù)字垂直居中的效果
解決思路：
方案1：line-height(在addroid下會(huì)出現(xiàn)問題)
通過設(shè)置line-height的高度等于父元素的高度一般會(huì)達(dá)到垂直居中的效果，但是在android出現(xiàn) 了問題
方案2：vertical-align(在addroid下會(huì)出現(xiàn)問題)
一般通過將父元素設(shè)置為display: table; 子元素設(shè)置為 display: table-cell; vertical- align: middle; 也會(huì)達(dá)到居中的效果；但是屢試不爽的vertical-align在android下也不行了
方案3：transform(親測(cè)可用)
將父元素position: relative; 或position：absolute;將要居中的子元素position：absolute; 再將子元素的top:50%;這樣子元素就會(huì)距離頂部元素有一個(gè)父元素一半高度的距離，之后再將子元素 往上移動(dòng)其自身高度的一半，就會(huì)達(dá)到垂直居中的效果，子元素往上移動(dòng)可以用 transform:translate(-50%,-50%)
**代碼示例：**
.circle
width 1.6rem
height 1.6rem
border-radius 50%
box-sizing border-box
background #7fb8df
color #ffffff
position absolute
line-height 1
top 0
left -0.8rem
z-index 1
span
font-size 1.2rem
display inline-block
position absolute
top 50%
left 50%
text-align center
transform translate(-50%,-50%)
line-height 1
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116599.html
摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問題最經(jīng)常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問題——最經(jīng)常遇見莫過于Android中文字稍微偏上了。在iOS和An...
摘要：經(jīng)常我們?cè)跒g覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問題最經(jīng)常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會(huì)有一個(gè)內(nèi)容區(qū)域，這個(gè)區(qū)域就是我們選中文本時(shí)展示的區(qū)域。 在日常工作中，經(jīng)常會(huì)遇到圖片+文字+背景色的設(shè)計(jì)稿實(shí)現(xiàn)。經(jīng)常我們?cè)贑hrome瀏覽器上調(diào)試的好好的，但是到了移動(dòng)端就會(huì)有各種奇特的適配問題——最經(jīng)常遇見莫過于Android中文字稍微偏上了。在iOS和An...
摘要：最近開發(fā)移動(dòng)端，發(fā)現(xiàn)安卓端對(duì)于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動(dòng)端APP，發(fā)現(xiàn)安卓端對(duì)于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案： 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設(shè)置...
摘要：最近開發(fā)移動(dòng)端，發(fā)現(xiàn)安卓端對(duì)于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動(dòng)端APP，發(fā)現(xiàn)安卓端對(duì)于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案： 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設(shè)置...
閱讀 2247·2021-09-04 16:40
閱讀 1570·2021-08-13 15:07
閱讀 3688·2019-08-30 15:53
閱讀 3290·2019-08-30 13:11
閱讀 1168·2019-08-29 17:22
閱讀 1884·2019-08-29 12:47
閱讀 1558·2019-08-29 11:27
閱讀 2520·2019-08-26 18:42
