list-style-image图片与文字居中对齐

list-style-image图片与文字居中对齐  

• HH
• HH
• HH

• H中国历史上影响最大的10首诗
• HH
• HH

 

 

list-style-image图片背景与文字对齐准则一：12px的汉字——16px的li高度——8px高度的背景图片。

如果是14px的文字呢？则是：14px的汉字——18px的高度——10px高度的背景图片。

 

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; text-indent:16px; line-height:18px; }
</style>

通过背景定位与text-indent首行文字缩进控制控制文字起始位置实现，

 

可以利用css hack调整到完美状态：

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; *height:16px; text-indent:16px; line-height:18px; *padding-top:2px;}
</style>

红色标示使IE下文字下沉2px从而与前面的黑色点点完美对齐。