Question

使用Font 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>

我看到了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

我假设您使用FontAwesome并定义了所有图标，以便使用.fa和.fa-info-circle。

这些类的作用是添加一个伪类选择器（:before）并添加一个图标作为CSS生成的内容（例如content:"\f021"）在你的真实内容之前：

（您的情况为<a href="info.html">About Us</a>）。

因此，为了将真实内容集中在您需要的是将生成的图标告知块级元素，以便删除下面的文本：

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

<强> DEMO

Answer 2

喜欢这个吗？

Fiddle

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

Answer 3

我认为你需要对齐图标而不是文字，因为你正在使用: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

图标下的中心文字？

3 个答案: