[英]center background image of a span in li with text centered and vertically aligned at bottom
我只想使用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>
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.