center background image of a span in li with text centered and vertically aligned at bottom
I want to recreate this using CSS only instead of a table
code will be something similiar to the following
<ul>
<li>
<span class="icon-class icon-name"></span>
<span clas开发者_开发知识库s="text">Text</span>
</li>
//more li's
</ul>
icon-class sets image, display block, width and height, and icon-name sets position li float left, list-style none
All of my CSS is fine except center aligning the icon; and vertically aligning text to the bottom and center aligning the text
You can do just :
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;}
Demo : http://jsfiddle.net/efqy7
Edit 1 : add margin 0 auto : http://jsfiddle.net/efqy7/3
EDIT 2 : add wrapper and position absolute/relative : http://jsfiddle.net/efqy7/7
http://jsfiddle.net/chillysheep/TXcjU/ Is this what you mean?
精彩评论