Home >Web Front-end >CSS Tutorial >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!