Html 垂直对齐 - 带有“list-style-image”的列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13454199/
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
Vertical Align - List with "list-style-image"
提问by Kris
Neither googling nor browsing in SO helped me - hope someone here can solve this :
谷歌搜索和浏览都没有帮助我 - 希望这里有人可以解决这个问题：
I have the following html :
我有以下 html ：
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
and css
和CSS
ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}
the "hook.png" image is 32x35 px - but whenever I create list items, text (e.g. ABC...) will always be shown below the image. Tried line-height and those 100% thingies - but neither worked out.
“hook.png”图像是 32x35 像素 - 但每当我创建列表项时，文本（例如 ABC...）将始终显示在图像下方。尝试过 line-height 和那些 100% 的东西 - 但都没有成功。
Any quick help :/ ?
任何快速帮助：/？
回答by Stumbler
Try some variation of
尝试一些变化
ul{
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
}
Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.
显然，该职位不太可能满足您的需求，但我会说，摆弄这种方法将是您最好的选择。
回答by IvanL
<html>
<head>
<style>
ul
{
list-style-image:none;
}
li
{
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)
从未见过我们的任何设计师在为列表实现自定义图标时尝试使用列表样式图像，我想这就是原因:)
回答by Ond?ej Kohout
I came up with something like that, which may save u some time HTML:
我想出了类似的东西，这可能会为您节省一些时间 HTML：
<ul class="rozcestnik">
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
</ul>
CSS:
CSS：
.rozcestnik {
list-style-type: none;
padding: 0;
margin: 2.5em 2em 0;
}
.rozcestnik li:before {
background: url("icon.png") no-repeat scroll 50% 50% transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}
.rozcestnik li {
position: relative;
padding-bottom: 5px;
padding-left: 5px;
}
According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".
根据自定义列表图像，您可能只需要自定义“:before”的顶部和大小以及“li”的填充。
It works across all major browsers and the application IE8 and more.
它适用于所有主要浏览器和应用程序 IE8 等。
回答by user1746468
If I have understood your problem is text seems bellow the baseline?
如果我理解你的问题是文本似乎低于基线？
Try to set beelow property for your text:
尝试为您的文本设置 beelow 属性：
padding-bottom
填充底部
