垂直对齐 - 用“列表样式图像”名单(Vertical Align - List with “lis

无论是谷歌上搜索，也没有浏览在SO帮我 - 希望这里有人能解决这个问题：

我有以下的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 ...）将始终显示的图像的下方。试过行高和那些100个％一样的东西 - 但既不制定。

任何快速帮助：/？

Answer 1:

请尝试一些变化

ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

显然，位置不太可能满足您的需求，但摆弄周围用这种方法将是你最好的选择，我会说。

Answer 2:

<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>

从来没有见过我们的设计师尝试列表实现自定义图标时，可以使用列表样式图像，我想这就是为什么:)

Answer 3:

如果我明白你的问题是文字似乎娄基线？

尝试设置beelow属性为您的文字：

填充底

Answer 4:

我想出了这样的事情，这可以节省ü一段时间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：

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

按照习俗一览图像，你可能只需要自定义顶部和大小“：之前”和填充的“礼”。

它的工作原理在所有主要的浏览器和应用程序IE8多。

文章来源: Vertical Align - List with “list-style-image”