zoukankan      html  css  js  c++  java
  • 移动端文字垂直居中问题兼容

    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就好了

  • 相关阅读:
    无废话WPF系列9: Binding的源
    无废话WPF系列7:WPF布局控件
    无废话WPF系列6:各类控件家族详解
    无废话WPF系列13:路由事件
    无废话WPF系列4: x名称空间
    无废话WPF系列12: 依赖属性和附加属性
    用C++设计一个不能被继承的类
    HMM的介绍及实现
    C语言综合实验3—计算器四则运算
    机器学习基础
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8871225.html
Copyright © 2011-2022 走看看