使用 font awesome 的自动边距不适用于 i 标签答案

【问题标题】：Auto margin not working on i tag using font awesome使用 font awesome 的自动边距不适用于 i 标签
【发布时间】：2013-04-28 02:05:00
【问题描述】：

我正在使用 font awesome 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; 
}

【问题讨论】：

标签： html css fonts

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试 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;
  }

【讨论】：

【解决方案3】：

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

a) 元素是display: block;

b) 具有固定宽度。

c) 不浮动。

试试这个：

Demo

.ico i {
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 20px;
}

【讨论】：