页面排版经常遇到‘图标+文字’的需求，正常样式写下来是这样

​，

但产品要的应该是长这样

​，怎么办呢？其实很简单，加个样式看看

vertical-align: top/middle/bottom;
浏览器都支持，当然后面的值是上对齐，下对齐，还是居中就要你自己去发挥喽～

CSS图标文字不对齐的更多相关文章

  1. 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...

  2. CSS技巧-文字分散对齐的方法

    下面的代码可以在IE中实现文字分散对齐: <table width="300" align="center">    <tr>      ...

  3. CSS实现文字两端对齐

    最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐) 如下图: 当时也没有多想直接使用‘ ’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了. 如图: 这 ...

  4. css text-align文字两端对齐

    text-align:start | end | left | right | center | justify | match-parent | justify-all justify: 内容两端对 ...

  5. 使用css让文字两端对齐

    text-align:justify; text-justify:distribute-all-lines; text-align-last:justify;可以让文字实现两端对齐

  6. CSS 控制文字两端对齐

    <html> <head> <style> td:after { content: ''; } td p{ font-size: 14px; width: 5em; ...

  7. CSS笔记---文字两边对齐

    <style> .box{ width: 1000px; height: 500px; background-color: #aa0000; margin:0 auto; } .teste ...

  8. css中文字两端对齐兼容IE

    text-align: justify; text-justify:inter-ideograph;

  9. css图标与文字对齐实现方法

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

随机推荐

  1. 使用sqlmap对进行php+mysql注入实战

    作者:陈小兵一般来讲一旦网站存在sql注入漏洞,通过sql注入漏洞轻者可以获取数据,严重的将获取webshell以及服务器权限,但在实际漏洞利用和测试过程中,也可能因为服务器配置等情况导致无法获取权限 ...

  2. Dubbo原理实现之使用Javassist字节码结束构建代理对象

    JavassistProxyFactory利用自己吗技术构建代理对象的实现如下: public <T> T getProxy(Invoker<T> invoker, Class ...

  3. Oracle11g手动创建数据库方法

    Oracle11g手动创建数据库方法 参考网页http://www.th7.cn/db/Oracle/201311/36926.shtml 安装路径 我的安装路径是:E:\app\admin\prod ...

  4. iOS-发送短信验证码倒计时

    /** 发送手机验证码 */ -(void)startSenderYzmMessage{ __block ; //倒计时时间 dispatch_queue_t queue = dispatch_get ...

  5. vue路由router的三种传参方式

    方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

  6. 使用bash echo 输出回车转义

    输出回车 [root@~]# echo -e 'hello\n'hello 回车去掉 [root@~]# echo -n hello hello[root@~]#

  7. POJ 2546

    #include<iostream> #include<numeric> #include<iomanip> #include<algorithm> # ...

  8. Linux inode空间占满 “no space left on device”

    Linux inode空间占满 提示 “no space left on device” 中文环境:“无法创建XXX目录,设备没有空间” Linux系统iNode耗尽硬盘无法写入文件怎么办?df -h ...

  9. JDK中ConcurrentHashMap效率测试

    比较HashMap HashTable 和ConcurrentHashMap的效率. 一般情况下,达到一定的数量之后JDK1.5之后提供的ConcurrentHashMap集合类的效率是前两者的3~4 ...

  10. Entity Framework 6.x 学习之 - 创建带连接表的实体模型 with Database First

    一.Modeling a Many-to-Many Relationship with No Payload 1. 创建数据库表 CREATE TABLE [Album] ( , ), ) COLLA ...