移动端开发时，让字体小于12px垂直居中的方法

最新推荐文章于 2023-06-17 18:09:52 发布

weixin_34313182

最新推荐文章于 2023-06-17 18:09:52 发布

阅读量604

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/smallzhu/p/9568571.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		* {margin: 0;}
		.small-font{
			display: inline-block;
			height:30px;
			line-height: 30px;
			border: 1px solid red;
		    font-size:20px;
		
		    transform: scale(0.50);
		    transform-origin:0 0;
		
		    -ms-transform: scale(0.50);         /* IE 9 */
		    -ms-transform-origin:0 0;       /* IE 9 */
		
		    -webkit-transform: scale(0.50); /* Safari 和 Chrome */
		    -webkit-transform-origin:0 0;   /* Safari 和 Chrome */
		
		    -moz-transform: scale(0.50);        /* Firefox */
		    -moz-transform-origin:0 0;      /* Firefox */
		
		    -o-transform: scale(0.50);      /* Opera */
		    -o-transform-origin:0 0;        /* Opera */
		}
		.container {
		    display: table;
		}
		.content {
		    background-color: gray;
		    font-size: 10px;
		    display: table-cell;
		    vertical-align: middle;
		}
	</style>
	<body>

			<span class="small-font">小于12px水平行高不居中</span>
			<div class="container">
			    <span class="content">小于12px水平行高不居中</span>
			</div>
	</body>
</html>

小于12px水平行高不居中

转载于:https://www.cnblogs.com/smallzhu/p/9568571.html

weixin_34313182

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端开发时，让字体小于12px垂直居中的方法

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> * {margin: 0;} .small-font{ display: i...
复制链接

扫一扫