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

Posted smallzhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端开发时,让字体小于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水平行高不居中

以上是关于移动端开发时,让字体小于12px垂直居中的方法的主要内容,如果未能解决你的问题,请参考以下文章

小于12px的文本居中问题

小于12px的文本居中问题

安卓移动端line-height垂直居中出现偏移的解决方法

移动端图片文字垂直居中实现方法

div在页面垂直居中方法---增强改进版

DIV+CSS LI里面怎么让垂直的文字垂直居中?