transform:translate (-50%,-50%) 造成的文字模糊和解决方案
来源:互联网 发布:知乎 庞麦郎 编辑:程序博客网 时间:2024/06/06 15:49
首先先上图,图片为工作项目图片,为了避嫌,打了个码。
如图所示,为了让文字在一个div中水平垂直都居中显示,用absolute定位和transform将文字放在了一个div的中间位置,
此时字号并不小,但字体边缘模糊。
这是因为transform时div的宽度或者高度并不是偶数,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。
解决方案是使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。
0 0
- transform:translate (-50%,-50%) 造成的文字模糊和解决方案
- transform: scale() 图片文字模糊的原因
- JFreeChart中文乱码和文字模糊问题的通用解决方案
- JFreeChart中文乱码和文字模糊问题的通用解决方案
- CSS3中translate、transform和translation的区别和联系
- CSS3中translate、transform和translation的区别和联系
- CSS3中translate、transform和translation的区别和联系
- css3中transform:translateY之后文字模糊的原因
- transition transform 的rotate 和 translate的关系
- CSS3中translate、transform、translation和animation的区别
- css3 transition transform属性造成文字抖动
- Transform.Translate
- Transform.Translate
- 优化transform在过渡效果中出现文字模糊和抖动问题
- CSS3animation,transform,translate,translation的区别
- transition、translate、transform、animation的区别
- position & transform: translate(-50%, -50%) 实现块元素百分比下居中
- Transform.Translate 平移
- Spring任务调度器之Task的使用
- Unity3D各部分执行顺序图
- easyui的combobox多选和单选回显
- Glide笔记
- Mac卸载pkg程序
- transform:translate (-50%,-50%) 造成的文字模糊和解决方案
- 关于LaTeX文献的管理(bibtex)
- 二维码原理介绍
- matlab画图线性选项
- C语言({})表达式
- layer常用提示框用法
- c# 书
- 无效的 CurrentPageIndex 值。它必须大于等于 0 且小于 PageCount。
- C# 交替显示项的DataGird,鼠标上移时转变颜色,退出后能恢复原来颜色