正文

解决li中的图片和文字不对齐div+css的方法

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0602
style li{ margin:2px3px3px8px; padding:5px; background:url(/images/sider_siteinfo.gif)no-repeat050%; list-style-type:none; list-style-position:inside; } / style div ul li 小弟,出道,人生地不熟,请各位指教 / li li 小弟,出道,人
  1. <style>
  2. li{
  3.     margin: 2px 3px 3px 8px;
  4.     padding: 5px;
  5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
  6.     list-style-type: none;
  7.     list-style-position: inside;
  8. }
  9.  
  10. </style>
  11.  
  12. <div>
  13.  
  14. <ul>
  15. 　　<li> 小弟,出道,人生地不熟,请各位指教</li>
  16. 　　<li> 小弟,出道,人生地不熟,请各位指教</li>
  17. 　　<li> 小弟,出道,人生地不熟,请各位指教</li>
  18. 　　<li> 小弟,出道,人生地不熟,请各位指教</li>
  19. 　　<li> 小弟,出道,人生地不熟,请各位指教</li>
  20. </ul>
  21. </div>
 

50%是垂直居中的意思！

控制图片和LI里面内容的间距
　　1、加 可以加大间距
　　2、padding-left来控制图片和LI里面内容的间距:
 
  1. <style>
  2. li{
  3.     margin: 2px 3px 3px 8px;
  4.     padding-left: 25px;
  5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
  6.     list-style-type: none;
  7.     list-style-position: inside;
  8. }
 

如果不是以背景色的图片，加上vertical-align:middle

 
  1. <ul>
  2. 　　<li> <img style=‘vertical-align:middle\' src=\'icon01.gif\' />前面的图片要和我对齐</li>
  3. 　　<li> <img style=\'vertical-align:middle\' src=‘icon01.gif\' />前面的图片要和我对齐</li>
  4. 　　<li> <img style=\'vertical-align:middle\' src=‘icon01.gif\' />前面的图片要和我对齐</li>
  5. 　　<li> <img style=\'vertical-align:middle\' src=‘icon01.gif\' />前面的图片要和我对齐</li>
  6. 　　<li> <img style=\'vertical-align:middle\' src=‘icon01.gif\' />前面的图片要和我对齐</li>
  7. </ul>