将图像（不同大小）和文本对齐到列表中心？

Question

是否可以通过使用CSS将所有内容对齐到此示例中心？如果没有那么我该怎么办？

正如您所看到的，图像的高度不同，因此使事情变得更加复杂。我想要的是对齐所有图像和文本，使它们看起来像一条线。

这是小提琴：http://jsfiddle.net/cRGeD/

Answer 1

简单回答使用span而不是li

http://jsfiddle.net/cRGeD/22/

Answer 2

这可以帮到你，我已经为文本添加了DIV并将其浮动到左边， 然后调整行高250％的李，检查小提琴 http://jsfiddle.net/chanduzalte/cRGeD/8/

Answer 3

编辑：在这里，我将以下原则应用于你的jsFiddle中的前两项：http://jsfiddle.net/cRGeD/23/。

HTML

<span class="icon question-icon">1234</span>

CSS

.icon{
  padding-left: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  display: inline-block;
}

.question-icon{
  background-image: url("../path/for/images.jpg");
}

这样，您可以为不同的图标使用不同的类，只需要将图像路径添加到新类。