垂直对齐 - 具有“列表风格图像”的列表 [英] Vertical Align - List with "list-style-image"

问题描述

Googling或浏览都没有帮助我 - 希望有人在这里可以解决这个问题：

Neither googling nor browsing in SO helped me - hope someone here can solve this :

我有以下html：

<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>

和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;}

hook.png图像是32x35像素 - 但每当我创建列表项目，文本（例如ABC ...）将始终显示在图像下面。

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.

任何快速帮助：/？

推荐答案

尝试一些变体

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.

这篇关于垂直对齐 - 具有“列表风格图像”的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！