The image and text in Li are not aligned with Div + CSS. solution:

2. <Style>
4. Li {
6. Margin: 2px 3px 3px 8px;
8. Padding: 5px;
10. Background: URL (/images/sider_siteinfo.gif) No-repeat 0 50%;
12. List-style-type: none;
14. List-style-position: inside;
16. }
18.  
20. </Style>
22.  
24. <Div>
26.  
28. <Ul>
30. <Li>Younger brother, debut, not familiar with life, please advise</Li>
32. <Li>Younger brother, debut, not familiar with life, please advise</Li>
34. <Li>Younger brother, debut, not familiar with life, please advise</Li>
36. <Li>Younger brother, debut, not familiar with life, please advise</Li>
38. <Li>Younger brother, debut, not familiar with life, please advise</Li>
40. </Ul>
42. </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> younger brother, out of the road, unfamiliar with the world. Please advise </LI> <li> younger brother, debut, not familiar with life, please advise </LI> <li> younger brother, debut, not familiar with life, please advise </LI> <li> younger brother, debut, not familiar with life, please advise </LI> <li> younger brother, debut, not familiar with life. Please advise </LI> </ul> </div>
 

50% indicates vertical center!

Controls the content spacing between images and Li.
1. acceleration can increase the spacing.
2. Padding-left controls the content spacing between the image and 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 ;}
 

If the image is not in the background color, addVertical-align: Middle

2. <Ul>
4. <Li> <IMG Style= 'Vertical-align: middle'SRC='Icon01.gif' />Align the image with me.</Li>
6. LI IMG style = 'vertical-align: middle' SRC using 'icon01.gif ' /> align the image with mE LI
8. LI > IMG style = 'vertical-align: middle' SRC using 'icon01.gif ' /> align the image with mE LI
10. LI IMG style = 'vertical-align: middle' SRC using 'icon01.gif ' /> align the image with mE LI
12. <Li> <IMG Style='Vertical-align: middle' SRCInvalid 'icon01.gif'/>Align the image with me.</Li>
14. </Ul>

 
  
  
 
   
   
 the image above must be aligned with mE 
 
   
   
 the image above must be aligned with mE 
 
   
   
 the image above must be aligned with mE 
 
   
   
 the image above must be aligned with mE 
 
   
   
 align the image with mE