li中的圖片和文字不對齊div+css,解決方案

 

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>

<style>li{    margin: 2px 3px 3px 8px;    padding: 5px;    background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;    list-style-type: none;    list-style-position: inside;}</style><div><ul>　　<li> 小弟,出道,人生地不熟,請各位指教</li>　　<li> 小弟,出道,人生地不熟,請各位指教</li>　　<li> 小弟,出道,人生地不熟,請各位指教</li>　　<li> 小弟,出道,人生地不熟,請各位指教</li>　　<li> 小弟,出道,人生地不熟,請各位指教</li></ul></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. }

<style>li{    margin: 2px 3px 3px 8px;    padding-left: 25px;    background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;    list-style-type: none;    list-style-position: inside;}

如果不是以背景色的圖片，加上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>

<ul>　　<li> <img style=‘vertical-align:middle' src='icon01.gif' />前面的圖片要和我對齊</li>　　<li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的圖片要和我對齊</li>　　<li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的圖片要和我對齊</li>　　<li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的圖片要和我對齊</li>　　<li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的圖片要和我對齊</li></ul>