html - 画像が存在する場合、ボタンのテキストを揃えます

Question

Web ページで複数回使用しているボタンがあります。ボタンのスタイルは次のようになります

1. テキストと画像を含むボタン。
2. 画像のみのボタン。
3. テキストのみのボタン。

http://jsfiddle.net/xzBaZ/4/に示すようにfiddle

ボタンクラスにも同じcssを使用しています。最初のケースの場合、テキストを垂直方向に中央に揃える必要があります。他のケースでは追加の調整は必要ありません。

これどうやってするの？？

Answer 1

テキストはスパンで書く必要があります

  <button onclick="return false" class="super button"><span>Awesome Button &raquo;
           </span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>

また、スパンのCSSを指定します

.button span{
    float:left;
    margin-top:3px;
}

Answer 2

vertical-align: bottomまたは画像とテキストの<img>行の高さを等しくします。後者は、事前に画像の高さを知っている必要があります。