html代码

<li>
<span class="left_item">在线</span>
<img class="right_item item_img" src="../../assets/admin/image/ztree_forbid.png" alt=""/>
</li>

相关css

.left_item {
width: 30%;
height: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
} .right_item {
width: 40%;
height: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
} .item_img{
width: 40px;
height: 40px;
} li {
padding: 5px 10px;
width: 100%;
vertical-align: middle;
box-sizing: border-box;
display: block;
}

效果图:

注意点:image和span都设置

vertical-align: middle;

image的高度和宽度不能用百分比,必须写死像素px

span和img标签对齐的更多相关文章

  1. HTML中Div、span、label标签的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  2. span的title标签中的换行

    var strs = data.flowSummary;  strs=strs.replace(/燮r燮n/g," "); js的全局替换用/要替换的字符串/g span的titl ...

  3. 多个div中的label标签对齐

    这是之前的页面效果: 添加红色部门的代码后: <head> <meta name="viewport" content="width=device-wi ...

  4. <span>和<div>标签的隐藏和显示切换

    <div class="axb"> <span id="tipStep1" class="fl" >第一步显示< ...

  5. form中label标签对齐,内容右对齐

    给label设置一个固定长度即可: label{      display:inline-block;      width:100px; text-align:right;    }

  6. p标签中的span标签文字垂直居中对齐

    <p>轻舞飞扬<span>第一次亲密接触</span></p> p标签的font-size:30px; span标签的font-size:24px; 让 ...

  7. LI 标签中让文章标题左对齐,日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

  8. ie下li标签中span加float:right不换行问题解决方案

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

  9. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

随机推荐

  1. 对SVM的个人理解---浅显易懂

    原文:http://blog.csdn.net/arthur503/article/details/19966891 之前以为SVM很强大很神秘,自己了解了之后发现原理并不难,不过,“大师的功力在于将 ...

  2. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  3. 读TIJ -7 多形性

    <Think in java·第 7 章  多形性> [面向对象的程序设计语言三种最主要的特征:数据抽象.继承和多态] 在这个层面是没有什么"思想"好谈的!当你依照人们 ...

  4. Android程序怎么做单元测试

    如何进行Android单元测试 Menifest.xml中加入: <application>中加入: <uses-library android:name="android ...

  5. Matlab interpgui

    function interpgui(arg1,arg2) %INTERPGUI Behavior of interpolating functions. % Demonstrates interpo ...

  6. OpenERP Web Client设置闲置有效时间

    在Web Client端使用OpenERP时,默认的cookie有效时间是浏览器的当前作业窗口,这样就是说只要你不关闭浏览器,不管闲置多长时间,当前的连线都是有效的.这样就会有安全问题,如果你忘了登出 ...

  7. Ldap登陆AD(Active Directory)进行认证的Java示例

    原文地址:http://hi.baidu.com/js2007/item/24efbb0fae1c9b90a3df432a package LdapTest; import java.util.Has ...

  8. 重新安装Drupal?

    因个人需要需要重新安装Drupal.如何操纵呢?Drupal是在_drupal_bootstrap_database()函数里面检查是否已经安装过的.检查的依据是有没有$GLOBALS['databa ...

  9. Android 打造完美的侧滑菜单/侧滑View控件

    概述 Android 打造完美的侧滑菜单/侧滑View控件,完全自定义实现,支持左右两个方向弹出,代码高度简洁流畅,兼容性高,控件实用方便. 详细 代码下载:http://www.demodashi. ...

  10. 【LeetCode】62. Unique Paths

    Unique Paths A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagra ...