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;width:120px;border-radius:5px;text-align:center;display: table}
.img-responsive , .close{display: table-cell;vertical-align: middle}

css图标与文字对齐实现方法的更多相关文章

  1. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  2. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  3. [CSS]图片与文字对齐问题

    摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...

  4. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  5. day3-3种实现小图标与文字水平对齐的方式

    效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...

  6. DIV+CSS 让同一行的图片和文字对齐

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  7. DIV+CSS 让同一行的图片和文字对齐【转藏】

    DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐 在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新 ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

随机推荐

  1. EncodeError: 'latin-1' codec can't encode characters in position 69-70: ordinal not in range(256)

    UnicodeEncodeError: 'latin-1' codec can't encode characters in position 69-70: ordinal not in range( ...

  2. Django中Cookie和Session配置和操作

    Cookie Cookie以键值对Key-Value形势进行信息的存储. Cookie基于域名安全,不同域名的Cookie是不能互相访问的 Cookie是存储在浏览器中的一段纯文本信息,建议不要存储敏 ...

  3. CSU1081有向图BFS

    集训队分组 Description中南大学ACM的暑期集训马上就要开始了,这次集训会将全体N名集训队员(编号分别为1, 2, …, N)按集训选拔赛的排名分成两组,前K名队员分入A组,其余队员分入B组 ...

  4. 使用cython库对python代码进行动态编译达到加速效果及python第三方包的制作安装

    1.测试代码:新建  fib.pyx # coding:utf-8 import matplotlib.pyplot as plt import numpy as np from sklearn.cl ...

  5. kafka学习(七)

    跨集群数据镜像 跨集群镜像的使用场景 1.区域集群和中心集群 2.冗余,发生紧急情况下使用第二个集群,保存相同的数据. 3.云迁移   多集群架构   跨集群中心通信的一些现实情况 1.高延迟 2.有 ...

  6. ConfigurationManager.ConnectionStrings 属性

    public static ConnectionStringSettingsCollection ConnectionStrings { get; } App.config <?xml vers ...

  7. 使用Object.create()实现继承 用 Object.create实现类式继承

    使用Object.create()实现继承:https://www.cnblogs.com/cuew1987/p/4075027.html 用 Object.create实现类式继承:https:// ...

  8. Java 14 可能带来什么新特性?

    JDK/Java 13 在一个月前已经发布,该版本带来了 5 大新特性,笔者观察到其中的 Text Blocks(文本块)特性似乎被讨论最多. 文本块特性与常见的 Python "" ...

  9. P1313计算系数

    这是2011年提高组第一题,一个数论题.如果当年我去的话,就爆零了wuwuwu. 题目:(ax+by)^k中询问x^m*y^n这一项的系数是多少?拿到题我就楞了,首先便是想到DP,二维分别存次数代表系 ...

  10. [LeetCode] 107. 二叉树的层次遍历 II

    题目链接 : https://leetcode-cn.com/problems/binary-tree-level-order-traversal-ii/ 题目描述: 给定一个二叉树,返回其节点值自底 ...