對齊按鈕文本，如果圖像存在

Question

我有一個按鈕，我在我的網頁中多次使用。按鈕樣式將爲

1. 帶文本和圖像的按鈕。
2. 只有圖像的按鈕。
3. 只有文本的按鈕。

如fiddle http://jsfiddle.net/xzBaZ/4/

出我使用Button類的他相同的CSS。如果是第一種情況，我需要將文本垂直對齊。其他情況下不需要額外對齊。

我該怎麼做？

Answer 1

vertical-align: bottom對<img>或使圖像和文字等高線高度。後者要求您事先知道圖像高度。

Answer 2

你應該寫在跨度

<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"/> 

文本，還可以指定爲跨度

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