原图：

效果图：

备注：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. Python3.X下安装Scrapy

    Python3.X下安装Scrapy (转载) 2017年08月09日 15:19:30 jingzhilie7908 阅读数:519 标签: python   相信很多同学对于爬虫需要安装Scrap ...

  2. Kafka 基础操作

    cd /root/kafka/kafka_2.10-0.8.2.2/bin 1.查看kafka topic kafka-topics.sh --list --zookeeper 172.16.100. ...

  3. learning java AWT 右键菜单

    import java.awt.*; import java.awt.event.*; public class SimpleMenu { private Frame f = new Frame(&q ...

  4. javascript 是实际上最容易被误解的语言

    不是立 Flag,而是摘录的 JSON 创始人的深切感受.如果你不同意,说明还理解的不够深入(kidding~)   “JavaScript is the world’s most misunders ...

  5. shell编程题（三）

    将一目录下所有的文件的扩展名改为bak #! /bin/bash for i in `ls` do mv $i ${i%%.*}.bak done ${i%%.*} 截掉一个变量字符串第一个" ...

  6. iframe中用到的例子

    <view:qrytr>         <view:qrytd colspan="4">     <iframe id="ccbl&quo ...

  7. Docker配置文件详解

    先来看一份 docker-compose.yml 文件,不用管这是干嘛的,只是有个格式方便后文解说: version: '2' services: web: image: dockercloud/he ...

  8. mysql数据库出现无法登录（ERROR 1045 ），预防和解决及系列问题解决方法。

      一 .当在windows下使用mysql数据库时,出现无法登录的现象,需要修改mysql数据库的roo密码时,我们可以使用一下两种方法. 1. (1)关闭mysql服务.然后在bin目录下使用cm ...

  9. DELPHI控件升级

    DELPHI控件升级 1)DELPHI里面卸载旧版控件: 2)WINDOWS里面卸载旧版控件: 3)删除旧版控件所在安装文件夹: 4)删除旧版的DCU,DCP,BPL文件: 5)安装新版控件: 6)程 ...

  10. 如何登陆Tomcat的控制台

    当我们成功安装启动Tomcat服务后,在浏览器输入http://localhost:8080(8080是Tomcat的默认端口,可自行修改)回车 右上角可以看到三个控制台:Server Status. ...