CSS设置行高文字不剧中的问题

最新推荐文章于 2025-05-27 11:12:37 发布

原创最新推荐文章于 2025-05-27 11:12:37 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

html5 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

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

通过在对象内增加一个元素（例如 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;
}