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

​，

但产品要的应该是长这样

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

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. POI读写海量Excel

    目前处理Excel的开源javaAPI主要有两种,一是Jxl(JavaExcel API),Jxl只支持Excel2003以下的版本.另外一种是Apache的Jakarta POI,相比于Jxl,PO ...

  2. D02-R语言基础学习

    R语言基础学习——D02 20190423内容纲要: 1.前言 2.向量操作 (1)常规操作 (2)不定长向量计算 (3)序列 (4)向量的删除与保留 3.列表详解 (1)列表的索引 (2)列表得元素 ...

  3. Shell - 简明Shell入门07 - 数组（Array）

    示例脚本及注释 #!/bin/bash test0=() # 定义数组 test1=(a b c d e f) # 定义数组 test2=( # 定义数组 'A?' "BB!" C ...

  4. 微信公众平台主动推送消息（asp.net）

    /// <summary>        /// MD5 32位加密        /// </summary>        /// <param name=" ...

  5. Error: insufficient funds for gas * price + value

    有位同学今天用 web3+infura 获取 Rinkeby测试网络 的账号信息,报错如下: (node:18356) UnhandledPromiseRejectionWarning: Error: ...

  6. Unity使用Rider作为IDE的体验

    Rider 2017.2.1比较完整的支持Unity开发. 通过添加插件代码实现了直接选择Rider作为编辑器. 支持调试. 支持双击跳转代码. Alt+Insert可以插入Unity event函数 ...

  7. Touch事件传递机制 Android

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在 ...

  8. JavaScript -- History

    -----042-History.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  9. 【IT笔试面试题整理】删除无序链表中重复的节点

    [试题描述]定义一个函数,输入一个链表,删除无序链表中重复的节点 [参考代码] 方法一: Without a buffer, we can iterate with two pointers: &qu ...

  10. java8 Stream使用案例

    1. 原理 Stream 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的,它更像一个高级版本的 Iterator. 原始版本的 Iterator,用户只能显式地一个一个遍历元素并对其执 ...