Maison  >  Article  >  interface Web  >  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose

li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:28:171451parcourir

 

 
      
  •  小弟,出道,人生地不熟,请各位指教
  •   
  •  小弟,出道,人生地不熟,请各位指教
  •   
  •  小弟,出道,人生地不熟,请各位指教
  •   
  •  小弟,出道,人生地不熟,请各位指教
  •   
  •  小弟,出道,人生地不熟,请各位指教

<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里面内容的间距:

<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

      
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
  •   
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
  •   
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
  •   
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
  •   
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐

<ul>  <li> <img  style=‘vertical-align:middle' src='icon01.gif' / alt="li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose" >前面的图片要和我对齐</li>  <li> <img    style="max-width:90%" src=‘icon01.gif' / alt="li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose" >前面的图片要和我对齐</li>  <li> <img    style="max-width:90%" src=‘icon01.gif' / alt="li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose" >前面的图片要和我对齐</li>  <li> <img    style="max-width:90%" src=‘icon01.gif' / alt="li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose" >前面的图片要和我对齐</li>  <li> <img    style="max-width:90%" src=‘icon01.gif' / alt="li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose" >前面的图片要和我对齐</li></ul>

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn