码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-08-31 23:25:28      阅读:510      评论:0      收藏:0      [点我收藏+]

标签:webkit   ica   head   display   div   字体   set   table   title   

<!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垂直居中的方法

标签:webkit   ica   head   display   div   字体   set   table   title   

原文地址:https://www.cnblogs.com/smallzhu/p/9568571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!