6

ブートストラップアイコンと画像を下に揃える方法は？（私はfont-awsome for iconsを使用しています）。

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>
4

2 に答える 2

4

これを試してください：http：//jsfiddle.net/jonschlinkert/CBss2/1/ これは適用後のように見えますline-height: 1;

ボタンスクリーンキャップ

@hajpojによって提案されたように、プロパティを台無しにするpositionことはありません。後でカスケード効果が発生しない問題を修正するためのよりクリーンな方法があります。使用に関するもう1つの問題position: relativeは、各アイコンのサイズが実際には少し異なることです。それを考慮して、メンテナンスを抑えたいと考えています。ほとんどの通常サイズのアイコンでは下揃えのように表示するのが最適です。平均よりも大きいアイコンを使用すると、テキストの中央に適切に配置されます。position: relative大きなアイコンを使用すると、他のアイコンの上に押し出され、中心から外れて見えます。

于 2013-01-16T19:23:38.980 に答える
0

相対位置を使用できます。

i {
    position: relative;
    bottom: 1px; // or however much you want to offset it by
}

http://jsfiddle.net/hajpoj/ZdPGe/

于 2013-01-16T19:20:24.430 に答える