zoukankan      html  css  js  c++  java
  • 移动端开发时,让字体小于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水平行高不居中
  • 相关阅读:
    【必备】史上最全的浏览器 CSS & JS Hack 手册(转)
    iScroll4.2.5中的无法滑动或点击的解决方案(转)
    无障碍网页设计(WCAG2.0)
    大小端
    TCP报文结构
    A*
    shell中uniq与sort -u 两种去重的对别
    login流程
    类模板成员函数
    game 角色相关记录
  • 原文地址:https://www.cnblogs.com/smallzhu/p/9568571.html
Copyright © 2011-2022 走看看