通过在对象内增加一个元素(例如 span),将其字体设置 N 倍大小,然后再通过 scale 设置缩小N倍(将缩放中点设置为左边)。
这样严格来讲,文字其实还是没有剧中的。但是误差缩小为原来的 1/N 了,肉眼基本看不出来了。
代码示例:
/*解决按钮垂直问题*/
button span{
float:left;
font-size:calc(3.5vw*5);
transform:scale(0.2);
white-space:nowrap;
transform-origin:0 50% 0;
}
/*固定span宽度,避免文字设置很大以后造成占位撑大容器*/
button.login span{
width:7vw;
}

本文介绍了一种使用CSS技巧解决按钮垂直居中显示的问题,通过在按钮内部添加一个span元素,并利用transform:scale进行缩放,实现视觉上的垂直居中效果。这种方法可以有效减少视觉误差,使按钮在不同屏幕尺寸下保持良好的视觉体验。
4万+

被折叠的 条评论
为什么被折叠?



