移動端垂直居中

ChristmasBoy 發布于2019-08-30 15:53 / 3604人閱讀

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

問題來源：

在近期的項目中要實現圖中圓圈里面的數字垂直居中的效果

解決思路：

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

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

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

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

方案3：transform(親測可用)

 將父元素position: relative; 或position：absolute;將要居中的子元素position：absolute;
 再將子元素的top:50%;這樣子元素就會距離頂部元素有一個父元素一半高度的距離，之后再將子元素
 往上移動其自身高度的一半，就會達到垂直居中的效果，子元素往上移動可以用
 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

GPU云服務器云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116599.html

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

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

sutaking 2019-08-23 13:50 評論0 收藏0
一篇文章了解移動端文本垂直居中

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

Vultr 2019-08-29 17:28 評論0 收藏0
關于移動端文字無法垂直居中（或line-height不起作用）的問題的解決方案

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

ingood 2019-08-29 12:21 評論0 收藏0
關于移動端文字無法垂直居中（或line-height不起作用）的問題的解決方案

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

Java3y 2019-08-01 16:37 評論0 收藏0