ブートストラップのアイコンと画像を一番下に合わせるにはどうすればいいですか？ （私はアイコンにfont-awsomeを使用しています）。ブートストラップアイコンをボタンのテキストに揃える方法は？
JSBIN：http://jsbin.com/uwupuz/2/edit
<div class="btn-group">
<a class="btn" href="#">
<i class="icon-plus"></i>
<span>Add</span>
</a>
<a class="btn" href="#">
<i class="icon-trash"></i>
<span>Remove</span>
</a>
<a class="btn" href="#">
<i class="icon-edit"></i>
<span>Edit</span>
</a>
</div>
これを試してみてください：http://jsfiddle.net/jonschlinkert/CBss2/1/これは、それはそこに、私はposition財産と台無しにしない@hajpojによって提案されたと同じようにline-height: 1;
適用した後、次のようになります後でカスケード効果を持たない問題を修正するよりクリーンな方法です。 position: relativeを使用する際のもう1つの問題は、実際には各アイコンのサイズが少し違うことです。あなたはそれを考慮に入れてメンテナンスを抑えようとします。 をのように表示するのは、ほとんどの通常のサイズのアイコンの場合と同様にボトムアライメントされているようにすることです。平均よりも大きなアイコンを使用すると、テキストの中央に正しく配置されます。 position: relativeを使用すると、大きなアイコンが他のアイコンの上に表示され、中心から外れて見えます。
あなたは相対位置を使用することができます。
i {
position: relative;
bottom: 1px; // or however much you want to offset it by
}
良い点、私はすべてのアイコンに相対的な位置を適用するつもりはない、微調整したいものだけを適用します。あなたのjsfiddleでbtwあなたの行の高さはより特定のCSSで乗って乗り越えています。 – hajpoj
はい、本当です - その部分について言及してくれてありがとう@hajpoj。ブートストラップのアイコンに適用されているユニバーサルセレクタは、特殊性を高めたり、重要でない限り、常にオーバーライドされます（重要なことはしません）ので、線の高さをソースで調整する必要があります。行の高さは、周囲のテキストに合わせて調整するので最も効果的です。しかし、私はhajpojのソリューションを使用している以上、他のすべてが失敗しているわけではない - それも便利に来ることができます – jonschlinkert