移动端垂直居中

ChristmasBoy 发布于2019-08-30 15:53 / 3579人阅读

摘要：问题来源在近期的项目中要实现图中圆圈里面的数字垂直居中的效果解决思路方案在下会出现问题通过设置的高度等于父元素的高度一般会达到垂直居中的效果，但是在出现了问题方案在下会出现问题一般通过将父元素设置为子元素设置为也会达到居中的效果但

问题来源：

在近期的项目中要实现图中圆圈里面的数字垂直居中的效果

解决思路：

方案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云服务器云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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