html - 列表文本不会与图像对齐

Question

我有这些图像驻留在我的无序列表中的每个列表元素中：

<ul class="bot">
    <li>
       <img src="images/crime.png" class="pil-img">
       <a href="#">Fire</a>
    </li>
</ul>

我希望对齐列表项中的文本，如图所示现在，我为<img />列表项中的元素提供了以下样式：

.pil-img {
    padding-right: 10px;
    margin: 4px 0px 0px 15px;
}

和<a />标签

.bot li a { margin-top: -5px; }

但这似乎不起作用。有任何想法吗？
干杯

Answer 1

html:

<ul>
  <li><a href="#">Some text</a></li>
  <li><a href="#">Some text</a></li>
</ul>

CSS：

ul li {
  background: url(image.png) no-repeat 100% 0;
  line-height: HEIGHT OF IMAGE (i.e. 100px);
  padding: 0 30px 0 0;
}

有一个开始。我需要知道您图像的尺寸才能为您提供更多帮助。

如果您需要 2 个图像（星号 + 十字/检查），那么您应该将 1 个 bg 添加到 the<li>和另一个到<a>. 这应该让你走上正确的轨道。

Answer 2

看看这在您的整体情况下是否适合您。

HTML

<ul class="bot">
    <li>
       <div class="div_class"><img src="images/crime.png" class="pil-img"></div>
       <div class="div_class"><a href="#">Fire</a></div>
    </li>
</ul>

CSS

.div_class {
    vertical-align: middle;
    display: inline-block;
}

您可以根据需要调整pil-img类。

这是一个小提琴。