移动端文字垂直居中问题兼容

 

div > span{
position: absolute;
right: 20px;
bottom: 20px;
display: inline-block;
width: 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;
            width: 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;
            width: 50px;
            height: 19px;
            line-height: 19px;
            font-size: 11px;
            background-color: #eee;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div style="width: 400px;height: 300px;border:1px solid red;position: relative;">
                <span>东方玄幻</span>
            </div>
        </li>
    </ul>
</body>
</html>

与浏览器最小字体大小有关，当10的时候怎么都不居中，11就好了

posted @ 2018-04-18 00:16  仔行天下  阅读(644)  评论(0)    收藏  举报