原图：

效果图：

备注：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. QEventLoop以及QT事件循环

    1.一般我们的事件循环都是由exec()来开启的,例如下面的例子: 1 QCoreApplicaton::exec() 2 QApplication::exec() 3 QDialog::exec() ...

  2. 简单理解php的socket编程【网摘】

    php的socket编程算是比较难以理解的东西吧,不过,我们只要理解socket几个函数之间的关系,以及它们所扮演的角色,那么理解起来应该不是很难了,在笔者看来,socket编程,其实就是建立一个网络 ...

  3. C 指针常量 和常量指针 指向常量的指针常量的使用

    #include <stdio.h> /* 指针常量 和常量指针 指向常量的指针常量 */ int main() { int a = 100; int b =200; int* const ...

  4. NTT小结及原根求法

    注意 由于蒟蒻实在太弱了~^_^~暂时无法完成证明,仅能写出简单版总结 与FFT的区别 \(NTT\)与\(FFT\)的代码区别就是把单位根换成了原根,从而实现无精度误差与浮点数的巨大常数 原根具有单 ...

  5. c#调用phantomjs 将 网页 存为 PDF

    一. 下载 phantomjs 具体下载方式 不再详细说明了. 二. 创建一个 rasterize.js 文件 (放在哪里都行, 我这里是放在了项目中) . 代码内容如下 var page = req ...

  6. 扩展ACL

  7. 用sublime3编写运行16位汇编程序_详细教程

    最近需要学8086汇编,课堂教学竟然是PPT看代码,然而不运行程序是没法学编程的.网上的教程有很多坑点,摸索出了正确的步骤. 1.安装sublime3.安装MASM32.64位系统安装DOSBOX(因 ...

  8. macbook ios recovery and mount hfs+ journal and revert

    sudo fsck.hfsplus -fryd /dev/sdc2 /sbin/fsck_hfs -yprd /dev/partitionName---can not fix b-tree node ...

  9. 小福bbs-冲刺集合

    [小福bbs-冲刺集合] 一 . 7次团队冲刺博客的链接 第①次冲刺链接 第②次冲刺链接 第③次冲刺链接 第④次冲刺链接 第⑤次冲刺链接 第⑥次冲刺链接 第⑦次冲刺链接 冲刺的时间 日志博客的名称 当 ...

  10. 利用pgAgent创建定时任务

    使用Postgresql自带的pgAgent,可以很方便地创建定时执行任务.现在网上的资料都比较旧,Postgresql版本更新得比较快,导致网上的一些教程都不合用了,现在我写分享一下自己的经验. P ...