我只想使用 CSS 而不是表格来重新创建它
代码将类似于以下内容
<ul>
<li>
<span class="icon-class icon-name"></span>
<span class="text">Text</span>
</li>
//more li's
</ul>
icon-class 设置图片、显示 block 、宽度和高度,icon-name 设置位置 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>
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;}
Edit 1 : add margin 0 auto : http://jsfiddle.net/efqy7/3
编辑 2: 添加包装器和绝对/相对位置:http://jsfiddle.net/efqy7/7
关于html - li 中跨度的中心背景图像,文本居中并在底部垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7760620/