设置了文字了小于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:直接用定位,只是比较傻的方法

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

  1. 设置文字小于12px

    问题:有时候会需要设置一些小于12px的字或是icon: 方法:使用css3的transform的scale,来放大和缩小,但是相应的容器也会缩小 transform: scale(0.6);

  2. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  3. 关于Google Chorme中字体小于12px的问题

    问题:当字体大小设置成小于12px时,Google chrome中字体的大小始终显示为12px. 而其他浏览器则没有这个问题. 这时只需要在要改变字体大小的元素中添加 -webkit-transfor ...

  4. 小于12px的字体大小在Chrome中不起作用

    今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...

  5. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

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

    在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设 ...

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

    前几天的一篇博文:移动Web单行文字垂直居中的问题,提到了移动web里小于12px的文字居中异常的问题,最后还是改为12px才近乎解决了问题.但是有时候或许并不是那么乐观,你并不能将原本定为10px的 ...

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

    做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...

  9. iOS设置文字过长时的显示格式

    以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...

随机推荐

  1. .net 开源组件推荐 之 StackExchange

    已经两年没更新过博客了!!! StackExchange,地址:https://github.com/StackExchange,开源的这些项目都是在StackOverflow线上使用的. 说起Sta ...

  2. ElasticSearch 2 (8) - 概览与简介

    ElasticSearch 2 (8) - 概览与简介 摘要 分布式集群架构,具有高扩充性,可随时增加或移除节点,并保证数据正确. 使用Apache Lucene储存JSON文件,提供全文搜索功能 所 ...

  3. PAT 1044 火星数字

    https://pintia.cn/problem-sets/994805260223102976/problems/994805279328157696 火星人是以13进制计数的: 地球人的0被火星 ...

  4. 链表的C/C++实现

    一个链表实现,函数声明放在 list.h 头文件汇总,函数定义放在list.cpp 中,main.cpp 用来测试各个函数. 1.文件list.h // list.h #ifndef __LIST_H ...

  5. Only IPV6 下 使用MSDTC ping 之后 出现 找不到主机的问题

    1. 很奇怪 使用两个虚拟机 进行IPV6测试, 需要验证MSDTC. app的机器名 Win12r2update DB的机器名 Win12r2UpdateDB 2. 在使用ipv4 以及 不进行ho ...

  6. 【luogu3768】简单的数学题 欧拉函数(欧拉反演)+杜教筛

    题目描述 给出 $n$ 和 $p$ ,求 $(\sum\limits_{i=1}^n\sum\limits_{j=1}^nij\gcd(i,j))\mod p$ . $n\le 10^{10}$ . ...

  7. windows10中远程登录ubuntu16.04的桌面

      1. 安装xrdp sudo apt-get install xrdp 2. 安装vnc4server sudo apt-get install vnc4server tightvncserver ...

  8. bzoj1052

    Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄 膜把这些小树遮盖起来,经过一番长久的思考,他决定用3个L*L的正方形塑料薄膜将 ...

  9. 【CF912E】Prime Game(meet in the middle)

    [CF912E]Prime Game(meet in the middle) 题面 CF 懒得翻译了. 题解 一眼题. \(meet\ in\ the\ middle\)分别爆算所有可行的两组质数,然 ...

  10. 浅谈跨平台框架 Flutter 的优势与结构

    作者:个推iOS工程师 伊泽瑞尔 一.背景 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的API所开发 ...