Html 以li为中心的跨度背景图像，文本居中，底部垂直对齐

我只想用CSS而不是表格来重新创建它

代码将类似于以下代码

<ul>
<li>
<span class="icon-class icon-name"></span>
<span class="text">Text</span>
</li>
 //more li's
</ul>

正文

//更多李的

图标类设置图像、显示块、宽度和高度，图标名称设置位置 li向左浮动，列表样式无

我所有的CSS都很好，除了中心对齐图标；将文本垂直对齐到底部并居中对齐文本，您只需执行以下操作：

HTML

<div id="wrapper">
    <ul>
        <li><div class="icon"></div> Really long text 1</li>
        <li><div class="icon"></div> Text 2</li>
    </ul>
</div>

演示：

编辑1:自动添加边距0:

编辑2:添加包装器并定位绝对/相对：

您只需执行以下操作：

HTML

<div id="wrapper">
    <ul>
        <li><div class="icon"></div> Really long text 1</li>
        <li><div class="icon"></div> Text 2</li>
    </ul>
</div>

演示：

编辑1:自动添加边距0:

---

编辑2:添加包装器并定位绝对/相对：

这就是你的意思吗

这就是你的意思吗

此外，ul不需要以内容为中心，因此为了跟上我的具体情况，我更新了fiddle cool，我添加了图像，以作为更好的示例：感谢您的快速响应，实际上，还不是我想要的答案：我希望图标垂直对齐也一样，ul不需要以内容为中心，所以为了跟上我的具体情况，我更新了fiddle cool，我添加了一些图像，以作为更好的示例：感谢您的快速响应，实际上，这还不是我想要的答案：我希望图标垂直对齐