让 list-style-image 图片垂直居中

最新推荐文章于 2024-05-30 01:03:53 发布
转载 最新推荐文章于 2024-05-30 01:03:53 发布 · 353 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/didi/archive/2010/06/24/1764547.html

本文介绍了一种在不同浏览器下使CSS列表项前的小图标实现居中的方法。通过使用背景图片而非list-style-image属性，并调整高度、行高及背景位置等属性值，解决了在IE浏览器下的显示问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

list-style-image 图片垂直居中
如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的，

但是在IE下想让他也居中正常的显示，死活不听话。
退而求其次，找了一个折中的解决办法，

就是使用ul li的backgrou-image（背景图片）来解决。
如下：

 

ContractedBlock.gifExpandedBlockStart.gifcss list-style-image 居中办法 
ul li{ 
    height:28px;    /*列表项的高度*/
    line-height:28px;    /*列表项的行高，行高与高设为相同，文字垂直居中*/
    text-indent:15px;    /*文字缩进15个像素，不然压到图表了*/
    background-image:url("../images/icon.gif");    /*图片的url地址*/ 
    background-position:left 45%;    /*北京图片的定位*/
    background-repeat:no-repeat;    /*禁止图片平铺，显示一个就好了*/
}






 


 


 


Firefox : li{background-position:left 50%)
IE : li{background-position:left 45%)

具體數值自己試一試


转载于:https://www.cnblogs.com/didi/archive/2010/06/24/1764547.html

                

        




    

    
  



    



                



	

		

			

				
					
uniapp-扩展小常识

				
			

			

				

					优快云博客专家，系统架构师，有合作、疑惑请私信博主。
				

				

					01-01
					
					1743
					
				

			

		

		

			
				
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。

			
		

	



                

            
              



	

		

			

				
					
5.5设置表项图像及位置

				
			

			

				

					LIN861的博客
				

				

					07-31
					
					549
					
				

			

		

		

			
				
第五周作业

			
		

	



              


  
              

                


	

		

			

				
					
CSS样式技巧 垂直居中

				
			

			

				

					加油吧，少年！
				

				

					03-12
					
					545
					
				

			

		

		

			
				
垂直居中-父元素高度确定的单行文本(相对于父元素垂直居中) 
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。 
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？ 
父元素高度确定的单行文本的竖直居中的方法是通过设置...

			
		

	





	

		

			

				
					
CSS实现垂直居中（八种）

				
			

			

				

					摸鱼程序员
				

				

					07-10
					
					3万+
					
				

			

		

		

			
				
1. 使用line-height实现垂直居中
适合文本使用，子元素的line-height跟父元素的height一样即可
1.1 代码
<style>
    .div1 {
        width: 400px;
        height: 100px;
        background-color: blue;

    }

    p {
        line-height: 100px;
    }
</style>
<body>
<div

			
		

	



		

			
		



	

		

			

				
					
解决list-style-image图片不居中一种方式

				
			

			

				

					
				

				

					01-24
					
					1025
					
				

			

		

		

			
				
ul li
{
    text-indent:15px; /*文字缩进15个像素，不然压到图表了*/
    background-image:url("../images/icon.gif"); /*图片的url地址*/
    background-position:left 45%; /*背景图片的定位*/
    background-repeat:no-repeat; /*禁止图片平铺

			
		

	





	

		

			

				
					
css居中的方式（水平居中+垂直居中+水平垂直居中）

				
			

			

				

					qq_44728587的博客
				

				

					07-13
					
					1056
					
				

			

		

		

			
				
一.水平居中盒子

1.行内元素水平居中

实现方法：首先要确定父元素是不是块级元素，如果是，则给父元素添加text-align:center；属性，如果不是，则给先给父元素设置display：block；属性再添加text-align:center;属性。


 <style>
 .out{
      width: 500px;
      height: 500px;
      background-color: blue;
      text-align: center;
    }

			
		

	





	

		

			

				
					
设置垂直居中的几种方法

				
			

			

				

					fish_skyyyy的博客
				

				

					10-15
					
					3236
					
				

			

		

		

			
				
设置垂直居中的几种方法
自己知道的不多，所以去网上搜了几种办法，以后了解到了还会继续补充：
（1）table-cell
将div的显示方式设置为表格，利用表格的vertical-align:middle属性：
<div clss="wrapper">
    <div class="cell">
        <div>垂直居中</div>
    </div>
</div>

<style>
   .wrapper {d

			
		

	





	

		

			

				
					
Li list-style-image 图片垂直居中

				
			

			

				

					01-19
				

			

		

		

			
				
list-style-image 图片垂直居中 如果使用list-style-image设置了一个列表项的前面的小图标，在FF下是正常显示的，  但是在IE下想让他也居中正常的显示，死活不听话。 退而求其次，找了一个折中的解决办法，  就是...

			
		

	





	

		

			

				
					
html图片在div页面水平垂直居中显示,CSS解决页面图片水平垂直居中问题的方法...

				
			

			

				

					weixin_39734646的博客
				

				

					06-03
					
					608
					
				

			

		

		

			
				
做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法...

			
		

	





	

		

			

				
					
uniapp 底部导航栏让list垂直居中

					
最新发布

				
			

			

				

					11-02
				

			

		

		

			
				
对于 list 组件（比如 `van-tabbar-item`），你可以使用 Flexbox 相关的属性来达到垂直居中的效果。下面是一个简单的示例：  ```html   <van-tabbar v-model="activeIndex" class="custom-tabbar">  <van-tabbar-...

			
		

	





	

		

			

				
					
CSS中实现元素水平居中、垂直居中的6个方法（详解）

					
热门推荐

				
			

			

				

					xtcbql的博客
				

				

					09-30
					
					7万+
					
				

			

		

		

			
				
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position

			
		

	





	

		

			

				
					
CSS实现垂直居中的5种方法

				
			

			

				

					m0_56649557的博客
				

				

					08-20
					
					2万+
					
				

			

		

		

			
				
第一种 position定位+margin负距离
前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果
    <style>
        .box1 {
            height: 300px;
            width: 300px;
            border: 10px solid pink;
            position: relative;
        }
        .

			
		

	





	

		

			

				
					
关于水平居中，垂直居中的三种办法

				
			

			

				

					adley_function的博客
				

				

					08-03
					
					529
					
				

			

		

		

			
				
方法一：利用flex弹性盒子<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            back

			
		

	





	

		

			

				
					
CSS 垂直居中的七种方法——史上最详细总结

				
			

			

				

					qq_37384271的博客
				

				

					10-10
					
					3万+
					
				

			

		

		

			
				
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。
一、设定行高（line-height）
设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元

			
		

	





	

		

			

				
					
list-style-image不能设置位置

				
			

			

				

					dingyu0064的博客
				

				

					01-11
					
					807
					
				

			

		

		

			
				
1.给li设置样式,简单的可以用list-style-image属性完成,直接赋值url图片路径就可以
但是当要求设置图片位置的时候,那么可以告诉大家,舍弃它,它不可以完成这项任务.
2.当上述方法怎么也达不到效果让你头痛万分的时候,你就要重新想到它background,你可以根据你的需要给他设置位置,下面给出我的一个例子:
.product-shiruo-left ul li{ ...

			
		

	





	

		

			

				
					
html中怎么在li中加图片,如何让li里的图片垂直居中

				
			

			

				

					weixin_42511714的博客
				

				

					05-31
					
					3725
					
				

			

		

		

			
				
如何让li里的图片垂直居中？111111            222222           别用display:table之类的啊，那样一个li占了一个大的单元格那么大的地方，无法和图片li紧贴在一起了。回复讨论(解决方案).box {/*非IE的主流浏览器识别的垂直居中的方法*/display: table-cell;vertical-align:middle;/*设置水平居中*/text...

			
		

	





	

		

			

				
					
ist-style-image:url标签，文字无法与前面的图标居中对齐

				
			

			

				

					qq_35315439的博客
				

				

					03-20
					
					330
					
				

			

		

		

			
				
做的项目列表需要做一个排行，前面会有一个金银牌的表示，自己ul标签，前面标识用list-style-image:url
采用ist-style-image:url标签

但自己开始怎么都无法让文字与金银牌对齐。写了vertical-align：middle,vertical-align：centter都不行。最后写了vertical-align:-webkit-baseline-middle;可以...

			
		

	





	

		

			

				
					
CSS：list-style作用

				
			

			

				

					Weiki的博客
				

				

					05-30
					
					1233
					
				

			

		

		

			
				
CSS：list-style作用

			
		

	





	

		

			

				
					
ul li 定制圆点，list-style-image调整图片圆点大小 与 文字和图片排版

				
			

			

				

					Coder的不平凡
				

				

					10-18
					
					2万+
					
				

			

		

		

			
				
今天我们要介绍两种前端要用到的布局：第一种是ul li定制化圆点的样式，然后使其与文字居中排列，另外一种是文字与图片混排并居中排版。
我们在使用ul li中通常会定制化圆点，使用如下代码就可以使圆点为自己设定的图片，然后调整圆点的对齐的像素
       ul li{
            list-style-type:none;
            background:url("img/ui.png") no-repeat 0rem 0.3rem;
            background-

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值