移动端rem布局中给盒子设置line-height文字不垂直居中问题解决办法

本人初入前端

并且以下内容完全是公司前辈自己总结并且传授于在下,具体说法可能不严谨,只希望能给各位解决问题。不喜勿喷

言归正传:

    最近在编写公司的移动端页面的时候,遇到一个问题,我想要做一个放置在页面右上角的活动规则按钮,所以我就用了一个p标签,按照正常的设计稿的尺寸 高度和宽度都给了,但是攒着正常的情况下给盒子一个line-height 并且设置成盒子的高度 此时 盒子里面的内容应该就会垂直剧中了,而且我也是这样做的

    但是后来测试小姐姐 反应在某些手机 例如三星note8 iphoneX 上面 上面设置的行高无效,后来按照前辈的教的,完全解决了问题。

    解决方法如下将P标签换成span标签并且不设置 宽度 和高度 用padding去将内容撑开,撑到跟设计稿一样的大小,再去设置其他样式。 这样问题就解决了。

初入前端才三个月希望自己会变的更好。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,703评论 1 92
  • 前言 对于熟悉pc端的小伙伴来说,对于静态页面的布局,一般都是没有什么问题的,为了保持各浏览器显示的一致性,无论是...
    itclanCoder阅读 14,646评论 5 61
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,760评论 32 459
  • 我把宴会都推了,我以为君笙会来说我,他没有,我实在不喜欢这些应酬,跟我那天在街头看见的耍猴一样,表现的好,就给了...
    笑蔻阅读 2,934评论 0 0
  • 本人只是个搬运工,尊重原创以下博文可以解决所有小白疑问,如有侵权,请联系本人删除。参考大牛博文:使用Flexibl...
    小锋子_Gruad阅读 11,078评论 0 14

友情链接更多精彩内容