Текст центра под иконкой?

Question

Использование шрифта Awesome. имеет несколько классов, которые ссылаются на конкретные иконки, например:

.fa-info-circle:before{content:"\f021"} <td class="fa fa-info-circle">

Теперь то, что я пытаюсь, чтобы центрировать текст под изображением:

<td class="fa fa-info-circle"><a href="info.html">About Us</a></td>

I видел this поток, но он работает только с img-тегами, и это не использует их.

Я попытался, хотя:

td.fa-info-circle { 
display: block; 
} 

table td { 
display: inline; 
margin-left: auto; 
margin-right:auto; 
text-align: center; 
} 

FIDDLE: http://jsfiddle.net/y8EB2/

Answer 1

Как это?

Fiddle

td.fa-info-circle a 
{ 
display: block; 
} 

Answer 2

Я думаю, что вам нужно, чтобы выровнять значок не текст, потому что вы используете :before селектор для значка так сделать так:

комплект position:relative на ваш td:

td.fa-info-circle { 
    position:relative; 
    padding-top:30px; /* as the height of your icon */ 
} 

затем редактировать .fa-info-circle:before:

.fa-info-circle:before{ 
    content:"\f021"; 
    position:absolute; 
    width:100%; 
    height:30px; /* as the height of your icon */ 
    left:0; 
    top:0; 
    text-align:center; 
} 

DEMO

---

как ваш демо:

.fa-info-circle:before{ 
content:url(http://files.softicons.com/download/toolbar-icons/free-tabs-icons-by-kevin-andersson/png/40x40/Circle-Info.png); 
height: 58px; 
width: 58px; 
position:absolute; 
top:0; 
left:50%; 
margin-left:-29px; 
} 

td.fa-info-circle { 
    display: block; 
    position:relative; 
    padding-top:70px; 
    min-width:58px; 
} 

Working DEMO

Answer 3

Я предполагаю, что вы используете FontAwesome и имеют все значки, определенные в или der использовать .fa и .fa-info-circle.

Что эти классы сделать, это добавить селектор псевдо-класса (:before) и добавить иконку в CSS контент (content:"\f021", например) перед вашим реальным содержанием:

(<a href="info.html">About Us</a> в вашем случае).

Так что для того, чтобы центрировать, что реальное содержание, что вам нужно, это сказать, что сгенерированный значок будет элемент уровня блока, чтобы упасть ниже текст:

td.fa-info-circle:before { 
    display: block; 
} 

DEMO