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

 

 

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

<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;}</style>

如果不是以背景色的图片，加上vertical-align:middle

　　
•  前面的图片要和我对齐
　　
•  前面的图片要和我对齐
　　
•  前面的图片要和我对齐
　　
•  前面的图片要和我对齐
　　
•  前面的图片要和我对齐

　　
• @@##@@前面的图片要和我对齐
　　
• @@##@@前面的图片要和我对齐
　　
• @@##@@前面的图片要和我对齐
　　
• @@##@@前面的图片要和我对齐
　　
• @@##@@前面的图片要和我对齐

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！