对齐按钮文本，如果图像存在

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; 
}