中心背景图像的跨度在李与文本居中和垂直对齐底部

Question

我想使用CSS而不是表

重新创建它

代码将类似于以下内容

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

icon-class设置图像，显示块，宽度和高度以及图标名称设置位置 li float left，list-style none

除了中心对齐图标外，我的所有CSS都很好;并将文本垂直对齐到底部并居中对齐文本

Answer 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

Answer 2

http://jsfiddle.net/chillysheep/TXcjU/这是什么意思？