成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動端垂直居中

ChristmasBoy / 3611人閱讀

摘要：問題來源在近期的項目中要實現(xiàn)圖中圓圈里面的數(shù)字垂直居中的效果解決思路方案在下會出現(xiàn)問題通過設(shè)置的高度等于父元素的高度一般會達(dá)到垂直居中的效果，但是在出現(xiàn)了問題方案在下會出現(xiàn)問題一般通過將父元素設(shè)置為子元素設(shè)置為也會達(dá)到居中的效果但

問題來源：

在近期的項目中要實現(xiàn)圖中圓圈里面的數(shù)字垂直居中的效果

解決思路：

方案1：line-height(在addroid下會出現(xiàn)問題)

   通過設(shè)置line-height的高度等于父元素的高度一般會達(dá)到垂直居中的效果，但是在android出現(xiàn)
   了問題

方案2：vertical-align(在addroid下會出現(xiàn)問題)

   一般通過將父元素設(shè)置為display: table; 子元素設(shè)置為 display: table-cell; vertical-
   align: middle;  也會達(dá)到居中的效果；但是屢試不爽的vertical-align在android下也不行了

方案3：transform(親測可用)

 將父元素position: relative; 或position：absolute;將要居中的子元素position：absolute;
 再將子元素的top:50%;這樣子元素就會距離頂部元素有一個父元素一半高度的距離，之后再將子元素
 往上移動其自身高度的一半，就會達(dá)到垂直居中的效果，子元素往上移動可以用
 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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116599.html

相關(guān)文章

  • 一篇文章了解移動端文本垂直居中

    摘要：經(jīng)常我們在瀏覽器上調(diào)試的好好的，但是到了移動端就會有各種奇特的適配問題最經(jīng)常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內(nèi)容區(qū)域，這個區(qū)域就是我們選中文本時展示的區(qū)域。 在日常工作中，經(jīng)常會遇到圖片+文字+背景色的設(shè)計稿實現(xiàn)。經(jīng)常我們在Chrome瀏覽器上調(diào)試的好好的，但是到了移動端就會有各種奇特的適配問題——最經(jīng)常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    sutaking 評論0 收藏0

  • 一篇文章了解移動端文本垂直居中

    摘要：經(jīng)常我們在瀏覽器上調(diào)試的好好的，但是到了移動端就會有各種奇特的適配問題最經(jīng)常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內(nèi)容區(qū)域，這個區(qū)域就是我們選中文本時展示的區(qū)域。 在日常工作中，經(jīng)常會遇到圖片+文字+背景色的設(shè)計稿實現(xiàn)。經(jīng)常我們在Chrome瀏覽器上調(diào)試的好好的，但是到了移動端就會有各種奇特的適配問題——最經(jīng)常遇見莫過于Android中文字稍微偏上了。在iOS和An...

    Vultr 評論0 收藏0

  • 關(guān)于移動端文字無法垂直居中（或line-height不起作用）的問題的解決方案

    摘要：最近開發(fā)移動端，發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動端APP，發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案： 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設(shè)置...

    ingood 評論0 收藏0

  • 關(guān)于移動端文字無法垂直居中（或line-height不起作用）的問題的解決方案

    摘要：最近開發(fā)移動端，發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案首先在頭部把我們常用的改為。 最近開發(fā)移動端APP，發(fā)現(xiàn)安卓端對于文字垂直居中的問題兼容性不好，網(wǎng)上也搜了很多方法，但是都比較麻煩，自己摸索出來了最終的解決方案： 1、首先在html頭部把我們常用的lang=en改為lang=zh-cmn-Hans。 此設(shè)置...

    Java3y 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<