フォントawesomのアイコンの整列

Question

私は3つのファフェのアイコンを同じ高さになるように並べて表示しようとしています。実際にはサイズを手動で設定しても（フォントサイズのプロパティを使用しても）サイズが揃っていない（11px程度にする必要があります）ということです。私は彼らのポジションをかなりの時間も変えようとしてきました。そして、その結果何です：

明らか

.trash { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.upload { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.download { 
 
    position: relative; 
 
    top: 1px; 
 
    font-size: 11px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-download download"></i> 
 
<i class="fa fa-upload upload"></i> 
 
<i class="fa fa-trash trash"></i>

、それらが整列されていません。それらをより「平等」にすることは可能ですか？私は、同様の質問が既に尋ねられていることを知っていますが、本当に私を助けませんでした。

Answer 1

すべてのキャラクターは同じベースラインを持っていないので、それぞれ個別に演奏する必要があります。私の例の赤い枠線がそれを示しています。これは私ができる最高です、私は整列をチェックするためにfont-sizeを30pxに設定しました。調整の

.icons { 
 
    font-size: 30px; 
 
    } 
 

 
.fa { 
 
    border-top: 1px red solid; 
 
    border-bottom: 1px red solid; 
 
} 
 

 
.download { 
 
    position: relative; 
 
    top: 0.07em; 
 
} 
 
.download:before { 
 
    font-size: 1.06em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="icons"> 
 
    <i class="fa fa-download fa-4x download"></i> 
 
    <i class="fa fa-upload fa-4x upload"></i> 
 
    <i class="fa fa-trash fa-4x trash"></i> 
 
</div>

使用相対フォントサイズ（em単位）、そしてそれは、フォントサイズにかかわらず同じです。

Answer 2

最も簡単な方法は、それらをすべて固定幅と中央のテキストの配置を与えることです：

.fa { 
    text-align: center; 
    width: 16px; 
} 

当然のことながら、あなたとあなたが望むように見えるようにそれを得るために幅で遊んでする必要があります所望のフォントサイズ。

Modified JSFiddle demo。

前：

後：あなたはこれを試すことができ

Answer 3

：

ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    border-radius: 100%; 
 
    margin: 0 11px; 
 
} 
 
i { 
 
    padding-top: 20%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul> 
 
    <li><i class="fa fa-download"></i> 
 
    </li> 
 
    <li><i class="fa fa-upload"></i> 
 
    </li> 
 
    <li><i class="fa fa-trash"></i> 
 
    </li> 
 
</ul>

Answer 4

あなたはアイコンのクラスの

vertical-align: middle; 

を使用しようとしましたか？