原图：

效果图：

备注：vertical-align:middle

  1. <div>
  2. <p class="time tl-size12" style="padding-top: 3px">45秒前</p>
  3.                             <img  src="../res/image/sc.png" style="width: 15px;height: 15px;padding-left: 20%;vertical-align:middle"><span class="tl-size12">收藏</span>
  4.                             <img  src="../res/image/fx.png" style="width: 15px;height: 15px;padding-left: 20%;vertical-align:middle"><span class="tl-size12">一键分享</span>
  5.                         </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. [RxJS] Subject asObservable() method

    You can create your own state store, not using any state management libraray. You might have seen th ...

  2. P3604 美好的每一天

    真·美好的每一天(美好个鬼啊) 真·调了一下午 原因是,我之前移动指针时没有先扩再缩,所以导致区间是负的:但是正常来说也没事,可是这题卡常,桶我开的是 unsigned short ,于是区间是负的, ...

  3. sqoop job 实现自动增量导入

    一.测试环境 1.MySQL表结构 mysql> show create table autoextend\GCREATE TABLE `autoextend` (  `id` bigint(2 ...

  4. PDB符号文件浏览工具介绍

    一.SymView SymView工具用来显示符号文件中包含的符号表和符号数据.目前支持微软的Visual C/C++和C#编译器产生的DBG格式的符号文件和PDB格式的符号文件. SymView提供 ...

  5. EasyUI日期时间框DateTimeBox

    WEB DEMO 日期时间框 DateTimeBox <!DOCTYPE html> <html> <HTML> <head> <HEAD> ...

  6. CodeForces 1202F(数论，整除分块)

    题目 CodeForces 1213G 做法 假设有\(P\)个完整的循环块,假设此时答案为\(K\)(实际答案可能有多种),即每块完整块长度为\(K\),则\(P=\left \lfloor \fr ...

  7. SpringMVC返回一个JSON对象到界面

    首先明确,在JavaScript中并没有类型这一说,只有一个类型就是var.我们要做的就是让JavaScript得到我们返回的一个对象让它以某种方式去处理数据. 前端代码 后台代码 @RequestB ...

  8. JVM 接口初始化规则

    1.创建两个接口,MyParent5接口,MyChild5 接口继承自MyParent5接口 public class MyTest5 { public static void main(String ...

  9. Generalized Intersection over Union: A Metric and A Loss for Bounding Box Regression

    Generalized Intersection over Union: A Metric and A Loss for Bounding Box Regression 2019-05-20 19:3 ...

  10. TP5单元测试

    tp5版本: 5.0.24 单元测试版本:1.* 1. 安装单元测试扩展: composer require topthink/think-testing .* 2.安装完毕,运行 php think ...