文字小于12px时,设置line-height不居中问题

设置了文字了小于12px时,会存在设置了line-height的不生效的问题,主要是由于基线的问题,这篇文章解释的很清楚,有兴趣的可以看下https://blog.csdn.net/q121516340/article/details/51483439

方法1:

使用CSS3 scale属性,设置时将所有的值设置大一倍,然后缩小一倍

        height: 32px;
            line-height: 32px;
            font-size: 20px;
            text-align: center;
            transform: scale(0.5);

方法2:直接用定位,只是比较傻的方法

原文地址:https://www.cnblogs.com/heihei-haha/p/9176433.html

时间: 2024-10-12 19:07:23

文字小于12px时,设置line-height不居中问题的相关文章

怎么让Chrome支持小于12px 的文字

1.用图片:如果是内容固定不变情况下,使用将小于 12px 文字内容切出做图片,这样不影响兼容也不影响美观. 2.使用 12px 及 12px 以上字体大小:为了兼容各大主流浏览器,建议设计美工图时候设置大于或等于 12px 的字体大小,如果是接单的这个时候就需要给客户讲解小于12px 浏览器不兼容等事宜. 3.继续使用小于 12px 字体大小样式设置:如果不考虑 chrome 可以不用考虑兼容,同时在设置小于 12px 对象设置-webkit-text-size-adjust:none,做到最

谷歌浏览器字体小于12px不能正常显示bug

google浏览器支持的最小字体是12px,当字体小于12px时还是只能显示12px: p{ font-size: 8px; -webkit-transform:scale(0.67); -webkit-transform-origin: 0 0 0; } 原文地址:https://www.cnblogs.com/jddk/p/8269120.html

解决Chrome谷歌浏览器不支持CSS设置小于12px的文字

在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-webkit-text-size-adjust:none; 如何让谷歌浏览器支持小于12px的字体 经常与网页打交道的攻城师,应该都知道.谷歌不支持小于12px的字体.网页解决方案很多.比如.修改浏览器配置.修改浏览器语言.但作为一个WEB,我们无法修改用户的浏

完美解决移动Web小于12px文字居中的问题

前几天的一篇博文:移动Web单行文字垂直居中的问题,提到了移动web里小于12px的文字居中异常的问题,最后还是改为12px才近乎解决了问题.但是有时候或许并不是那么乐观,你并不能将原本定为10px的字体改为12px.那该怎么办呢. 我们都知道,移动端为了高清屏显示1px的border,会有那么几种方法,通常最好的方法是transform scale,并且支持圆角.既然一个border能缩放,那么整个文字区域自然也能缩放. 比如上篇博文里的示例,CSS是这样的: .label { height:

解决CSS小于12px的文字在谷歌浏览器显示问题

做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题,后面一步步排查出来,在Chrome谷歌浏览器中确实不支持CSS设置字体小于12px,那我们要如何解决Chrome谷歌浏览器不支持CSS小于12px文字的问题呢? 今天强创网络来讲下具体方法.Chrome谷歌浏览器是Webkit的内核,有一个 -webkit-text-size-adjust 的私有

如何在谷歌浏览器下设置小于12px的字体

如果在谷歌浏览器下设置小于12px的字体:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在谷歌浏览器有一个由来已久的问题,那就是无法设置小于12px字体,就算是设置了小于12px的字体也只会显示12px大小.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="ht

label.lineBreakMode设置lable中文字过长时的显示格式,其中可以有末尾以省略号显示。

iOS4.0版本: label.lineBreakMode = NSLineBreakByCharWrapping;以字符为显示单位显示,后面部分省略不显示. label.lineBreakMode = NSLineBreakByClipping;剪切与文本宽度相同的内容长度,后半部分被删除. label.lineBreakMode = NSLineBreakByTruncatingHead;前面部分文字以……方式省略,显示尾部文字内容. label.lineBreakMode = NSLine

设置小于12px的字体

.small-font{   font-size:12px;             -webkit-transform-origin-x: 0;            -webkit-transform: scale(0.90);        } .smallsize-font {  font-size:10.8px;         } <p style="color: #FF0000;" class="small-font smallsize-font"

移动端开发时,让字体小于12px垂直居中的方法

* { margin: 0 } .small-font { display: inline-block; height: 30px; line-height: 30px; border: 1px solid red; font-size: 20px } .container { display: table } .content { background-color: gray; font-size: 10px; display: table-cell; vertical-align: midd