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

<!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水平行高不居中

小于12px水平行高不居中

猜你喜欢

转载自www.cnblogs.com/smallzhu/p/9568571.html