列表文本不会与图像对齐

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张图片（星标+交叉/支票），则应向<li>添加1 bg，向<a>添加1 bg。这应该让你走上正轨。

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班级。

这是fiddle。