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

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

WBOY
WBOYOriginal
2016-06-24 12:28:171453browse

 

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn