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

​，

但产品要的应该是长这样

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

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. pika配置文件说明

    # Pika 端口 port : 9221 # pika进程数量,不建议超过核心数量,pika是多线程的 thread-num : 1 # Sync 线程数量 sync-thread-num : 6 ...

  2. oracle安装完成之后，执行sqlplus命令，提示：bash: sqlplus: command not found...

    1.安装完oracle后,用终端登录,因为不是直接用oracle用户登录的,所以我就执行$ su oracle切换成oracle用户之后,执行"echo $ORACLE_HOME" ...

  3. springbootf访问静态文件资源

    springboot目录结构: 网友说在springboot的配置文件中加 现在访问static目录下的jquery文件 用jquery在页面做一个弹窗 启动服务看页面效果 页面没有出现弹窗 ,连jq ...

  4. 【sping揭秘】2、关于spring配置文件

    <import>标签 引入其他的配置文件,如果A.xml 中的<bean>定义可能依赖B.xml中的某些<bean>定义,那么可以再A.xml中使用这种方式< ...

  5. Java异常处理设计（一）

    很多次的经验教训,让我不得不重视异常处理.经常遇到的问题如下:1)日志不准确,错误原因难以查明!!2)日志量太大,查找麻烦!!3)哪里需要记录日志,哪里不用记录日志?往往随心所欲!!分析以上问题,深入 ...

  6. Hadoop框架之HDFS的shell操作

    既然HDFS是存取数据的分布式文件系统,那么对HDFS的操作,就是文件系统的基本操作,比如文件的创建.修改.删除.修改权限等,文件夹的创建.删除.重命名等.对HDFS的操作命令类似于Linux的she ...

  7. 在matlab中实现梯度下降法

    梯度下降法的原理,本文不再描述,请参阅其它资料. 梯度下降法函数function [k ender]=steepest(f,x,e),需要三个参数f.x和e,其中f为目标函数,x为初始点,e为终止误差 ...

  8. 基于vue的web应用如何构建成手机端的原生安装包

    话不多说,点击前往

  9. Ruby：多线程队列(Queue)下载博客文章到本地

    Ruby:多线程下载博客文章到本地的完整代码 #encoding:utf-8 require 'net/http' require 'thread' require 'open-uri' requir ...

  10. Android Studio常用设置

    Android  Studio显示行号 File-->Setting(Ctrl+Alt+S),选择Editor-->General-->Appearance,右侧勾选Show lin ...