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

  • 相关阅读:
    基础操作
    需要注意
    简单操作
    git指令-版本回退
    设计模式-代理模式
    在idea下遇到的问题汇总
    maven笔记--持续更新
    poi简介
    Win10添加右键在此处打开命令行
    Ajax&Json案例
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8871225.html
Copyright © 2011-2022 走看看