центральное фоновое изображение пролета в 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 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/ Это то, что вы имеете в виду?