使用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. EasyUI中datagrid的基本用法

    EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图

  2. spring7——AOP之通知和顾问

    通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...

  3. leetcode算法:Distribute Candies

    Given an integer array with even length, where different numbers in this array represent different k ...

  4. POJ-3723 Conscription---最大权森林---最小生成树

    题目链接: https://vjudge.net/problem/POJ-3723 题目大意: 需要征募女兵N人, 男兵M人. 每征募一个人需要花费10000美元. 带式如果已经征募的人中有一些关系亲 ...

  5. POJ-2570 Fiber Network---Floyd+二进制表示集合

    题目链接: https://vjudge.net/problem/POJ-2570 题目大意: 一些公司决定搭建一个更快的网络,称为"光纤网".他们已经在全世界建立了许多站点,这 ...

  6. 从感知机到 SVM,再到深度学习(二)

        这篇博文承接上一篇,详细推导了 SVM 算法,包括对偶算法,SMO 优化算法,核函数技巧等等,最后还提到用高度非线性的曲线代替超平面,就是神经网络的方法.     在第一篇中已经得到了最优间隔 ...

  7. Ubuntu Sublime 配置

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 2018.4.14 Ubuntu Sublime 配置 承 Ubuntu Apach ...

  8. linux搭建node环境超详细教程

    linux 环境搭建详细步骤 1.访问官方网址:https://nodejs.org/en/download/ 2.选择和你服务器版本相关的压缩包,复制下载链接 3.服务器登录ssh,(这里我用的服务 ...

  9. WebGL文字渲染的那些问题

    THREE.js开发的应用运行在iphone5下发现有些时候会崩溃,跟了几天发现是因为Sprite太多频繁更新纹理占用显存导致的.通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理 ...

  10. Apache 安装与配置(WIN10)

    本地坏境:windows 10 Pro 1709 Apache版本:httpd-2.4.32-Win64-VC15 Apache下载地址:https://www.apachelounge.com/do ...