2

これらの要素を整列させる最良の方法は何ですか? チェックマークアイコンにmargin-topを使用して、ボタンの中心線に揃えないようにしたい。

これは避けたい

 <div class="icon check" style="margin-top:11px;"></div>

ここでのライブ例: JSFiddle

ここに画像の説明を入力

<div id="statusbar">
 <div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
 <div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
 <div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>
4

2 に答える 2

1

良い方法はvertical-align:middle、ラッパーに設定し、display:inline-block次のように子に使用することです。

<div id="statusbar">
 <div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
 <div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
 <div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>

.icon{
    width:10px;
    height:10px;
    border:1px solid #000;
    display: inline-block;
}

.inactive{
     display: inline-block;
}

#statusbar{
    height:auto;
    vertical-align: middle;
}

デモ

于 2013-10-10T20:51:41.980 に答える
0

チェックボックスのアイコンの高さをボタンの高さと同じに設定してから、チェックボックスの背景画像を垂直方向に中央揃えにします。ボタンの高さの設定方法に応じて、これは font-size と line-height、または単に高さによる可能性があります。次に、次を使用します。

.icon {
  background-position: 0 center;
}

それが役に立たない場合は、CSS または JSFiddle の一部を共有してください。

于 2013-10-10T20:53:49.947 に答える