Home  >  Article  >  Web Front-end  >  How to vertically center the list-style-image image?

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

黄舟
黄舟Original
2017-06-29 10:20:232646browse

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!

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