Html 列表垂直对齐文本中间与列表样式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21427199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
List vertical align text middle with list-style-image
提问by r3plica
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:
我正在尝试在列表 li 中垂直对齐一些文本并且遇到问题。首先，您需要知道我已经用自定义图像替换了我的列表样式图像。这是我的 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;
垂直对齐：中间；
which didn't work, so then I tried:
这不起作用，所以我尝试了：
line-height: 50px;
行高：50px；
which also did not work, so I tried:
这也不起作用，所以我尝试了：
display: table
显示：表
which worked, but the image disappears from the list item....
哪个有效，但图像从列表项中消失了....
Does anyone know of a way to get this to work?
有谁知道让这个工作的方法？
回答by Mr. Alien
The issue using list-style-imageis that you cannot align with the text, the best thing to do is to use background-imagefor lielement, and then use padding-leftfor your lielements.
使用的问题list-style-image是你不能与文本对齐，最好的办法是使用background-imageforli元素，然后使用padding-left你的li元素。
Buggy Demo(The issue which you are facing)
Buggy Demo（您面临的问题）
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;
}
回答by Fanky
you can have
你可以有
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
回答by Pat M
How about
怎么样
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
position: relative;
}
ul li span {
position: absolute;
top: (x)px;
left: (x)px;
}
