1

我正在使用很棒的字体http://fortawesome.github.io/Font-Awesome/来创建我的图标。为此，我在锚标记内添加了一个图标。在此锚标记中，我无法将图标居中，该图标只是相对于 HTML 的文本

http://jsfiddle.net/sK2V5/7/

 <a class="ico" href="#"><i class="icon-help"></i></a>

i:before
{
  content:"\260E";
}

.ico {
  border: 1px solid black;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
   width:36px;
  }

.ico i {
    margin-right: auto;
    margin-left: auto;
    display: inline-block; 
}

 .ico i:before {
    margin-right: auto;
    margin-left: auto;
    display: inline-block; 
}
4

3 回答 3

2

如果您希望在 .ico 内居中，您应该能够将父级 (.ico) 设置为 text-align:center;

于 2013-04-28T02:17:08.837 回答
1

margin: 0 auto;仅在以下情况下有效：

a) 元素是display: block;

b) 具有固定宽度。

c) 不浮动。

尝试这个：

演示

.ico i {
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 20px;
}
于 2013-04-28T02:17:10.157 回答
1

尝试 text-align: center to .ico 类

.ico {
  border: 1px solid black;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
   width:36px;
   text-align: center;
  }
于 2013-04-28T02:17:38.930 回答