以 li 为中心的 span 的背景图像，文本居中并在底部垂直对齐答案

【问题标题】：center background image of a span in li with text centered and vertically aligned at bottom以 li 为中心的 span 的背景图像，文本居中并在底部垂直对齐
【发布时间】：2011-12-07 07:39:30
【问题描述】：

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

代码将类似于以下内容

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

icon-class 设置图片、显示块、宽高，icon-name 设置位置 li 向左浮动，列表样式无

我所有的 CSS 都很好，只是图标居中对齐；并将文本垂直对齐到底部并居中对齐文本

【问题讨论】：

标签： html css css-sprites centering

【解决方案1】：

你可以这样做：

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>

CSS

ul { text-align: center; }
li { display: inline-block; }
#wrapper { position: absolute; }
.icon { position: relative; width: 50px; height: 50px; border: 1px solid #aaa; margin: 0 auto;}

演示： http://jsfiddle.net/efqy7

编辑 1： 添加边距 0 自动：http://jsfiddle.net/efqy7/3

编辑 2： 添加包装器并定位绝对/相对：http://jsfiddle.net/efqy7/7

【讨论】：

另外，ul 不需要以内容为中心，所以为了跟上我的具体情况，我更新了小提琴jsfiddle.net/efqy7/2
酷，我添加图片是为了成为一个更好的例子：jsfiddle.net/efqy7/6 感谢您的快速响应
实际上，还不是我想要的答案：jsfiddle.net/efqy7/9 我希望图标垂直对齐

【解决方案2】：

http://jsfiddle.net/chillysheep/TXcjU/这是你的意思吗？

【讨论】：