文字小于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:直接用定位,只是比较傻的方法
文字小于12px时,设置line-height不居中问题的更多相关文章
- 设置文字小于12px
问题:有时候会需要设置一些小于12px的字或是icon: 方法:使用css3的transform的scale,来放大和缩小,但是相应的容器也会缩小 transform: scale(0.6);
- Chrome浏览器下CSS字体大小设置小于12px无效问题
当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body { -webkit-text-size-adjus ...
- 关于Google Chorme中字体小于12px的问题
问题:当字体大小设置成小于12px时,Google chrome中字体的大小始终显示为12px. 而其他浏览器则没有这个问题. 这时只需要在要改变字体大小的元素中添加 -webkit-transfor ...
- 小于12px的字体大小在Chrome中不起作用
今天遇见一个小问题,让人挺郁闷的,在Chrome浏览器中无法把字体变成12px以下.网上搜索以下,发现无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解 ...
- css中em小于1时chrome字体大小和firefox字体大小不一致的问题
css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...
- 解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
在最新版的谷歌里.已经不在支持这个属性啦 谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即 可实现字体大小不随终端设 ...
- 完美解决移动Web小于12px文字居中的问题
前几天的一篇博文:移动Web单行文字垂直居中的问题,提到了移动web里小于12px的文字居中异常的问题,最后还是改为12px才近乎解决了问题.但是有时候或许并不是那么乐观,你并不能将原本定为10px的 ...
- 解决CSS小于12px的文字在谷歌浏览器显示问题
做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...
- iOS设置文字过长时的显示格式
以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...
随机推荐
- Alpha发布评价
1.奋斗吧兄弟组 食物链系统 是一个比较成熟的工具,可以应用于生物课程的辅助讲解,具有很强的软件目的性和实用性. 2.Newbee 俄罗斯方块 因为选了很经典的游戏,所以在创新上下了一定功夫,可是没有 ...
- 用javaScript将页面滚动条到底部
((JavascriptExecutor) driver).executeScript("document.body.scrollTop=500000"); 通过该方法可以将有滚动 ...
- d3 数学方法(伪随机数生成器 )
一.正态(高斯)分布(normal (Gaussian) distribution)的随机数 /* var nomarlRandmo = d3.random.normal(); console.log ...
- 关于vue-eslint自动补全代码,以及自动生成雪碧图
一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth&quo ...
- thinkphp5 速查表
本速查表里的类都是think为命名空间的,实例化时省去了 use.用的时候注意. 本速查表里会有四种方法的调用: 公有方法 $class = new Class(); $class->foo ...
- OneZero第三次站立会议(2016.3.23)
会议时间:2016年3月23日 13:00~13:15 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,夏在统计界面中 ...
- php学习目录
前面的话 前端工程师为什么要学习php?是因为招聘要求吗?这只是一方面 一开始,我对学习php是抵触的,毕竟javascript已经够自己喝一壶的了,再去学习php,可能让自己喝醉.但是,在学习jav ...
- Problem A: 踢罐子 解题报告
Problem A: 踢罐子 Description 平面上有\(n\)个点,其中任意2点不重合,任意3点不共线. 我们等概率地选取一个点A,再在剩下的\(n-1\)个点中等概率地选取一个点B,再在剩 ...
- 前端学习 -- Css -- 样式的继承
像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承, 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式. 但是并不是所有的样式都会 ...
- JAVA实现组合、排列、重复排列(多层循环)
1.代码 package com.hdwang; import java.util.ArrayList; import java.util.Arrays; import java.util.List; ...