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

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

WBOY
WBOYOriginal
2016-06-24 12:28:171524Durchsuche

 

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

<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>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn