列表垂直对齐文本中间与列表样式图像 [英] List vertical align text middle with list-style-image
问题描述
我试图垂直对齐列表中的一些文本,并有问题。
首先,你需要知道我已经用自定义图像替换了我的列表风格图像。这是我的CSS:
I am trying to vertically align some text within a list li and having issues. First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
}
我试图看看是否有一种方法让文本对齐中间。
我试过:
I tried to see if there was a way of getting the text to align to the middle. I tried:
vertical-align:middle;
vertical-align: middle;
没有工作,所以我试过:
which didn't work, so then I tried:
line-height:50px;
line-height: 50px;
这也没有工作,所以我试过:
which also did not work, so I tried:
display:table
display: table
但是图像从列表项中消失....
which worked, but the image disappears from the list item....
有人知道有办法让这个工作吗?
Does anyone know of a way to get this to work?
推荐答案
c $ c> list-style-image 是你不能与文本对齐,最好的做法是使用 background-image
li 元素,然后为
>元素。 li
padding-left
The issue using list-style-image
is that you cannot align with the text, the best thing to do is to use background-image
for li
element, and then use padding-left
for your li
elements.
Buggy演示 / a> (您遇到的问题)
ul li {
background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
}
ul {
margin: 50px;
}
这篇关于列表垂直对齐文本中间与列表样式图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!