原图：

效果图：

备注：vertical-align:middle

<div>

<p class="time tl-size12" style="padding-top: 3px">45秒前</p>

                            <img  src="../res/image/sc.png" style="width: 15px;height: 15px;padding-left: 20%;vertical-align:middle"><span class="tl-size12">收藏</span>

                            <img  src="../res/image/fx.png" style="width: 15px;height: 15px;padding-left: 20%;vertical-align:middle"><span class="tl-size12">一键分享</span>

                        </div>

html 图标和文字一行对齐的更多相关文章

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

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

  2. Android 自己定义 TextView drawableTop 图标与文字左对齐(效果图)

    public class DrawableTopLeftTextView extends TextView { private Paint mPaint; private float fFontHei ...

  3. css实现一行文字居中，多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

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

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

  5. 纯CSS实现文字一行居中，多行左对齐的方法

    其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

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

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

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

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

  8. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  9. 【】小技巧】CSS文字两端对齐

    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...

随机推荐

  1. NoSql数据库使用半年后在设计上面的一些心得 （转载）

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  2. Oracle DG 三种模式

    DG有下面三种模式– Maximum protection– Maximum availability– Maximum performance 在Maximum protection下, 可以保证从 ...

  3. CSS3新增选择器：伪元素选择器

    一.  ::first-letter 第一个字 二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...

  4. jmeter五种提取器 之 正则表达式

    提取器的作用是把响应结果值获取到,用于后续的请求参数中 () :封装了待返回的匹配字符串. .  :匹配任何单个字符串. + :一次或多次. ? :不要太贪婪,在找到第一个匹配项后停止. *  :匹配 ...

  5. React.createElement 与 JSX

    DOM 向JSX的演进 网页由 DOM 元素构成.React DOM 并不是浏览器的 DOM,而React DOM 只是用来告诉浏览器如何创建 DOM 的方法.通常情况下,我们并不需要 React 就 ...

  6. 高可用Redis：Redis Cluster

    转(https://www.cnblogs.com/renpingsheng/p/9862485.html) Redis Cluster是Redis官方提供的Redis集群功能 1.为什么要实现Red ...

  7. JavaWeb之基础(2) —— HTTP协议

    1. 粗讲什么是HTTP协议 HTTP协议的全程是Hyper Text Transfer Protocol,超文本传输协议,见名知意,这是个用来控制传输超文本的协议.下面就来简单说说什么是HTTP协议 ...

  8. Python中单引号和双引号的作用

    一.单引号和双引号 在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有 ...

  9. ubuntu16.04和ubuntu18.04安装dlib

    - # for macOS brew install cmake brew install boost brew install boost-python --with-python3 # for U ...

  10. Fixed-Length Frames 谈谈网络编程中应用层(基于TCP/UDP)的协议设计

    http://blog.sina.com.cn/s/blog_48d4cf2d0101859x.html 谈谈网络编程中应用层(基于TCP/UDP)的协议设计 (2013-04-27 19:11:00 ...