li中跨度的居中背景图像，文本居中并在底部垂直对齐

Question

​

​

我只想使用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都很好，除了居中对齐图标；垂直对齐文本到底部和居中对齐文本

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 auto：http://jsfiddle.net/efqy7/3

EDIT 2 :添加包装和绝对/相对位置：http://jsfiddle.net/efqy7/7

Answer 2

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