How to vertically center the list-style-image image?

If you use list-style-image to set a small icon in front of a list item, it will be displayed normally under FF. list-style-image vertically centers the image
If you use list-style-image to set a small icon in front of a list item, it will be displayed normally under FF,

but you want it to be displayed under IE It also displays a normal display in the center, but it is disobedient.
The next best thing is to find a compromise solution.

It is to use ul li's backgrou-image (background image) to solve the problem.
As follows:

ul li{ 
height:28px; /*列表项的高度*/ 
line-height
:28px; /*列表项的行高，行高与高设为相同，文字垂直居中*/ 
text-indent
:15px; /*文字缩进15个像素，不然压到图表了*/ 
background-image
:url("../images/icon.gif"); /*图片的url地址*/ 
background-position
:left 45%; /*北京图片的定位*/ 
background-repeat
:no-repeat; /*禁止图片平铺，显示一个就好了*/ 
}

Firefox : li{background-position:left 50%)
IE : li{background-position:left 45%)

Please give it a try for the specific percentage!

The above is the detailed content of How to vertically center the list-style-image image?. For more information, please follow other related articles on the PHP Chinese website!