div > span{
position: absolute;
right: 20px;
bottom: 20px;
display: inline-block;
50px;
height: 20px;
line-height: 22px;
font-size: 10px;
background-color: #eee;
text-align: center;
}
原因1:字体太小,字体大了就ok了;;;
原因2:字体大小是奇数;
解决1:安卓手机端一般,,,,line-height比height大2px就居中了,,,line-height要大一点点
这个是完美的:
height: 20px;
line-height: 21px;
font-size: 10px;
20 h 21 lh 10完美
19 h 21 lh 10也可以
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试移动端文字垂直居中,安卓机的兼容性</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <style type="text/css"> *{ margin:0; padding: 0; } /*手机居中,pc不居中*/ /*div > span{ position: absolute; right: 20px; bottom: 20px; display: inline-block; 50px; height: 22px; line-height: 22px; font-size: 11px; background-color: #eee; text-align: center; }*/ /*22 10 不居中 12 23 10 不居中 13 22 11 居中 11 23 11 居中 12 这个最好 22 12 居中 23 12 居中 19 10 不居中 ued的设计 19 11 居中 */ div > span{ position: absolute; right: 20px; bottom: 20px; display: inline-block; 50px; height: 19px; line-height: 19px; font-size: 11px; background-color: #eee; text-align: center; } </style> </head> <body> <ul> <li> <div style=" 400px;height: 300px;border:1px solid red;position: relative;"> <span>东方玄幻</span> </div> </li> </ul> </body> </html>
与浏览器最小字体大小有关,当10的时候怎么都不居中,11就好了