原图：

效果图：

备注：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. 机器学习---用python实现感知机算法和口袋算法（Machine Learning PLA Pocket Algorithm Application）

    之前在<机器学习---感知机(Machine Learning Perceptron)>一文中介绍了感知机算法的理论知识,现在让我们来实践一下. 有两个数据文件:data1和data2,分 ...

  2. golang 斐波那契数

    golang 斐波那契数 package main import "fmt" /* 斐波那契数,亦称之为斐波那契数列(意大利语: Successione di Fibonacci) ...

  3. Bat 复制本地文件到共享目录

    @echo off title "copy UI" net use \\172.16.104.93\心电图 "password" /user:"adm ...

  4. Ubuntu16.04 RYU pip命令安装

    pip命令安装方法 sudo apt install gcc python-dev libffi-dev libssl-dev libxml2-dev libxslt1-dev zlib1g-dev ...

  5. go中的方法以及自定义类型代码示例

    package main import "fmt" type user struct { name string age int sex string } type admin s ...

  6. lol英雄时刻

    2019.5.30 翻出了当年人生中第一次LOL五杀截图...我用佐伊拿五杀了! 第一次五杀超激动的

  7. csapp网络编程初学笔记

    csapp网络编程初学笔记 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型,服务器管理某种资源,并且通过操作来为它的客户提供某种服务 客户端-服务器模型中的基本操作是transacti ...

  8. MySQL事务表和非事务表

    查看 max_binlog_stmt_cache_size 参数解释时,有这么一句话 If nontransactional statements within a transaction requi ...

  9. Unity3d 错误提示 GUI Error: You are pushing more GUIClips than you are popping. Make sure they are balanced

    程序出現這個問題的話,程序編譯時正確,運行時報錯,而且沒有報出是哪個代碼文件出處. 這個問題一般首先去檢查Level內有用到OnGUI,Debug結果發現某代碼文件在調試代碼時複製多了一行GUILay ...

  10. iview3 版本 升级

    Button 废弃 type ghost,原先的 default 样式有改变. Icon 的图标升级至 ionicons 3.0 图标,图标名称有改变. Breadcrumb 废弃 href 属性. ...