Question

div+css 列表(项目符号图像)与文字 中线对齐

代码：
.zx_szdtk_bt li{ list-style-image: url(../images/z_zs1.gif); }
-----------------------------------------------------------------------------------
<div class="zx_szdtk_bt"><li>水族地图库</li></div>

注：具体看图！
不能用插背景 ，这个图不清楚，下面那蓝的是背景（它是有渐变的，不能提取颜色）。。。
==================================================================
不一定是我写的那种方法，其他简单有效的好方法也可以，只要能达到那种效果就可以了！谢谢

Answer 1

首先 list-style-image不能设置位置，所以如果要实现你的效果，要把你的项目符号直接做成尺寸刚刚好的，

这样个尺寸大小的，

但是这样限制性太强，所以还是用背景来做比较方便

 background:url("../images/z_zs1.gif") no-repeat 3px 13px;

改动里面的px数值，可以上下左右移动背景图标，移动到适合的位置，然后给li增加padding-left属性就行了

Answer 2

给你一个建议，别把图片作为list-style-type,把图片这么放。
<li><img src="图片">水族地图库</li>
然后微调一下。

Answer 3

你先调整一下<li>的line－height试一试，不行的话，你把结构改成<li><span>文字</span></li>，在调整一下span的的line－height试一试。

Answer 4

调整图片的大小位置，上下左右移动试试
其实不推荐这么做，因为项目符号图片在几个主流浏览器里面效果都不相同，这样一来要做CSSHACK，而且要多做几个图片，分别对应各个浏览器

Answer 5

.zx_szdtk_bt { background:url(../images/蓝色的背景.gif) left top repeat-x; height:蓝色的背景高度px; }
.zx_szdtk_bt li{ background:url(../images/z_zs1.gif) 10px center no-repeat; line-height:蓝色的背景高度px; }