zoukankan      html  css  js  c++  java
  • css图标与文字对齐实现方法

    1.移动端(安卓设备、ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐。

    2.

    实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样。

    水平上的差距几乎没有,垂直方向上的效果会多种多样。

    遇到这种ui,我的做法是把图片写在::before里,用margin去定位,这样不管右侧的文案是否绝对的垂直居中,但至少图是相对文案去定位的,是和文案对齐的。

    3. 使用display:table

    <div class="close-btn">
        <div class="img-responsive">
            <img src="http://s1.mi.com/m/images/20151028/top-x.png">
        </div>
        <div class="close">关闭</div>
    </div>
     
        *{padding:0;margin:0;}
        .close-btn{background:red;color:#fff;height:45px;120px;border-radius:5px;text-align:center;display: table}
        .img-responsive , .close{display: table-cell;vertical-align: middle}
  • 相关阅读:
    自动装箱和==和equals
    4.1 java 类加载器
    23种设计模式
    ionic2打包 配置路径
    ionic2 native app 更新用户头像暨文件操作
    Spring Security三种认证
    maven设置本地仓库地址和设置国内镜像
    ps选框工具全解
    最长公共子序列问题
    内部排序算法的稳定性
  • 原文地址:https://www.cnblogs.com/huancheng/p/8599473.html
Copyright © 2011-2022 走看看