html - font awesome を使用している i タグで自動マージンが機能しない

Question

私は私のアイコンを作成するために素晴らしいフォント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; 
}

Answer 1

を .ico 内の中央に配置する場合は、親 (.ico) を text-align:center; に設定できる必要があります。

Answer 2

margin: 0 auto;次の場合にのみ機能します。

a) 要素はdisplay: block;

b) 固定幅です。

c) 浮いていない。

これを試して：

デモ

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

Answer 3

text-align を試す: .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;
  }