小于12px的文本居中问题

HelKyle 发布于2019-08-30 15:53 / 1973人阅读

摘要：前几天在做项目的过程中，关于字体小于时，很难做到完全居中显示，表示有点抓狂，各种百度找到一个貌似还不错的方法，总结出来分享给你和我。

前几天在做项目的过程中，关于字体小于12px时，很难做到完全居中显示，表示有点抓狂，各种百度找到一个貌似还不错的方法，总结出来分享给你和我。

在PC端的Chrome浏览器中，小于12像素的字体仍然以12像素显示，即使是设置了-webkit-text-size-adjust: none;也好像没什么作用。经过实验，发现如下两种方式比较有用，各位看官可听我细细道来。

方式一

使用transform:scale()
假如设计同学给你的字体大小是10px,你设置了font-size:10px，此时在PC中测试并不会看到效果；一种有用的方法是：

font-size: 12px //PC中Chrome的最小字体
transform: scale(0.833333333);
height: 12px; //设计给的高度是10px
line-height: 12px;

这种方式是可以将字体缩小到将近10px，但是包裹字体的标签(div,p)的宽度、高度甚至是margin等值都缩小了0.8333333，假如设计同学给你的div的高度是20px，现在为了能正确显示20px的高度，你必须要将高度设置为(20/0.8333333)px，宽度和margin的值的设置也是这样；要想让其居中，也必须将line-height设置为(20/0.8333333)px；这种计算方式比较复杂，且这种方式可能会影响到文档流中其他元素的位置，于是就有了如下的方式二的产生。

方式二

方式二中有两个比较重要的点：
（1）对于小于12px的字体，可先将其扩大二倍，然后使用transform缩小0.5倍
（2）在标签的位置方面，可以给它一个相对定位的父元素，此父元素的高度和宽度可按照设计图设置，然后将它的定位设置为相对定位，并且使其位于父元素的中心（垂直水平都居中）
HTML结构如下：


    
        我要垂直水平居中

css样式：

.parent{
    position: relative;
    width: 120/@rem;
    height: 24/@rem;
    overflow: hidden;   
}
child{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 240/@rem;
    height: 48/@rem;
    line-height: 48/@rem;
    font-size: 36/@rem;
    color: #ffffff;
    transform: scale(0.5);
    background: #fa5d5f;
    border-top-left-radius: 16/@rem;
    border-bottom-right-radius: 16/@rem;
    box-sizing: border-box;
}

parent和child的关系如下图所示，其中parent相当于用来占位，这样缩放就不会影响到parent外面的父元素，因为进行缩放的是绝对定位的child，它不在文档流内，并不会影响到其他元素在文档流中的位置。

另外，附送两个小tips
（1）小于12px的字体（或者说微信webview）不适用line-height,但是在大于等于12px的字体（或者非微信webview）适用line-height,那么从这方面就可以尝试通过csshack的方式来实现了，所以如果想用line-height做居中处理，最好不要使用小于12px的字体，可以使用方式一进行缩放；
（2）字体最好使用偶数像素，基数像素在显示时，通常会遇到1个像素偏差，无法完全居中，这个可以和设计同学商量。

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

转载请注明本文地址：https://www.ucloud.cn/yun/116798.html

单选框和复选框与文本的垂直居中显示问题

摘要：故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的博客是很不错的选择之一，对这些基本技能阐述得十分透彻。本文是对其很早一篇文章复选框或单选框与文字对齐的问题的深入研究的再次实验，毕竟浏览器对的支持多年来变化很大。前言工作三年，写了不少代码，也确实接触不少技术。但是仔细回顾，却又感一片空白，一脸茫然。故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的...

WrBug 2019-08-01 17:54 评论0 收藏0
单选框和复选框与文本的垂直居中显示问题

摘要：故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的博客是很不错的选择之一，对这些基本技能阐述得十分透彻。本文是对其很早一篇文章复选框或单选框与文字对齐的问题的深入研究的再次实验，毕竟浏览器对的支持多年来变化很大。前言工作三年，写了不少代码，也确实接触不少技术。但是仔细回顾，却又感一片空白，一脸茫然。故尝试揣摩业界大牛的一些历程，希望能得到不一样的收获。张鑫旭前辈的...

yck 2019-08-29 13:44 评论0 收藏0
前端常见问题——安卓文本无法垂直居中

摘要：安卓文本无法垂直居中的问题问题安卓的字体大小在小于像素的时候无法使用行高来垂直居中目前在微信等应用都存在该问题，而在最新的移动端浏览器上无该问题截止本文编写时间，微信客户端的版本为，版本为。安卓文本无法垂直居中的问题问题安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中 ps：目前在微信等应用都存在该问题，而在最新的移动端 Chrome 浏览器上无该问...

aristark 2019-08-29 17:19 评论0 收藏0
移动端兼容问题总结(1)

摘要：原文地址键盘类型问题描述在上只需要更换即可更改键盘类型，无效。补充解决方式输入法顶起页面问题描述页面被输入法顶起，导致滚动，无法锁定解决方式在当前容器外层再包裹一层，使用来解决这个问题，做一个容器内滚动。原文地址: https://luoyangfu.com/article... input 键盘类型问题描述: 在android上只需要更换type 即可更改键盘类型，ios无效。...

arashicage 2019-08-30 11:21 评论0 收藏0