解决H5设置了line-height但并没有居中的问题
2024-09-06 14:33:50
遇到的问题
- 明明设置了line-height = height,但在H5页面里文字并没有居中。
原因
- 因为line-height是两条基线之间的距离,当元素高度和font-size差距较大时,会出现不居中的情况。(PS:这个原因是在别的文章里看到的,没能完全理解,也不确定对不对,所以搬到这里仅供参考)
解决方案
1. 通过放大再缩小的方法,并不适用于所有情况。
.serve{
width: 100px;
height: 40px;
line-height: 40px;
font-size: 24px;
text-align: center;
transform: scale(0.5);
}
2. 利用伪元素,有些情况下并不起作用。
.serve{
width: 50px;
height: 20px;
font-size: 12px;
text-align: center;
}
.serve::after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-top: 4px; // 这个值不固定,需要根据自身情况调整
}
3. 使用flex,个人觉得有点大材小用。
.serve{
width: 50px;
height: 20px;
display: flex;
align-items: center;
font-size: 12px;
text-align: center;
}
4. 直接将全局的lang设置为zh即可,个人觉得此方法最简单快捷且有效。
最新文章
- PHP数组详解
- jquery复选框checkbox实现删除
- Java并发编程核心方法与框架-CyclicBarrier的使用
- HTML小知识---Label
- Build Slic3r on Windows // 如何在Windows上编译Slic3r
- SAP debug的几种方式
- 《javascript高级程序设计》第三章 Language Basics
- Pop Sequence (栈)
- 续上文----线性表之单链表(C实现)
- 【1】Hover 效果收集
- 忘记了root密码,如何进入系统?
- Java经典编程题50道之八
- MyBatis映射器元素
- 微信小程序开发小结
- 正益工作能担起PaaS+SaaS的未来探索吗?
- oracle新建对象 权限管理
- hdu1569-方格取数-二分图网络流
- 机器学习进阶-图像金字塔与轮廓检测-图像金字塔-(**高斯金字塔) 1.cv2.pyrDown(对图片做向下采样) 2.cv2.pyrUp(对图片做向上采样)
- Nodejs学习笔记(十)—与MongoDB的交互(mongodb/node-mongodb-native)、MongoDB入门
- CentOS7系列--3.1CentOS7中配置NFS服务