使用list-style-image设置了一个列表项的小图标时,一直不能让图标居中的显示。

解决办法是:使用ul li的backgrou-image(背景图片)来设置。

代码如下:

ul li{
height:28px;
line-height:28px;
text-indent:15px;
background-image:url("../images/icon.gif");
background-position:left 45%;
background-repeat:no-repeat;
}

注:在默认情况下,list-style-image如果插入的图标是比较大的图的时候,默认是图标和文字底部对齐,试了很多次,没办法改变。用这种办法,把图标设为li的背景,然后控制背景的位置,是一个很好的解决办法。

li标签中list-style-image如何居中的更多相关文章

  1. 用正则表达式抓取网页中的ul 和 li标签中最终的值!

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

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

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

  3. div放在li标签中,无法撑开li标签的问题

    作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签, ...

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

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

  5. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  6. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  7. js正则匹配html标签中的style样式和img标签

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  8. 关于li标签的value属性值的获取问题

    在前几天的开发过程中,遇到了这样一个问题. 在li标签中嵌入了一个value属性,如这样滴: <li id="ts1" value="0001">& ...

  9. PHP 导出网页表格如何对标签中的内容设置属性

    当在使用php导出excel表格的时候,有时需要将某一列专门设置成文本属性 方法: 在需要设置属性的的<td>标签中 添加  style='vnd.ms-excel.numberforma ...

随机推荐

  1. SQL查询语句练习

    最近在学习SQL嘛,所以各个地方找题目来练手,毕竟现在能离得开数据库么? Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C ...

  2. C# bootstrap之表格动态绑定值

    这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...

  3. windows计划任务

    前段时间写了一个小工具,实现两个数据库的数据同步. 需求:要求每天的某个时间自动同步数据 功能写好之后,发现了windows一个自带的功能不错,可以实现我的需要,不用写定时器触发了 控制面板-> ...

  4. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  5. Android P新功能特性抢先看

    2018年3月8日,Google推出了Android P Preview版本,并提供官方镜像下载. 为了让广大开发者能够及时了解Android P的新功能特性,提前为您的app进行良好适配,WeTes ...

  6. vuex commit保存数据技巧

    vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据 ...

  7. 深入探究Lua的GC算法(下)-《Lua设计与实现》

    紧接着上一篇文章zblade:深入探究Lua的GC算法(上)-<Lua设计与实现> 这篇文章让我们收尾GC的具体后续操作.转载请标明出处:http://www.cnblogs.com/zb ...

  8. 20180117MySQL出现Waiting for table metadata lock的原因以及解决方法

    转自http://www.cnblogs.com/digdeep/p/4892953.html 转自:http://ctripmysqldba.iteye.com/blog/1938150 (有修改) ...

  9. SQL*Plus工具使用 sqlplus / as sysdba登录

    A: 正常情况下 [oracle@hukou admin]$ sqlplus / as sysdba Copyright (c) 1982, 2013, Oracle.  All rights res ...

  10. 将 Net 项目升级 Core项目经验:(三)迁移后的Net Standard版本的类库测试和多平台项目实测

    迁移后的Net Standard版本的类库测试和多平台项目实测 按照第一步的方法,添加一个Net Core的MSTest项目,然后将原来的测试项目下的代码迁移到新测试 项目中,然后引用新的Beyond ...