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

Question

我有一个按钮，我在我的网页上多次使用。按钮样式将为

1. 带文字和图片的按钮。
2. 仅限图片的按钮。
3. 仅包含文字的按钮。

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

我正在使用相同的css作为按钮类。如果是第一种情况，我需要将文本垂直对齐到中心。并且其他情况不需要额外的对齐。

我该怎么做？

Answer 1

vertical-align: bottom上的

<img>或使图片和文字等高线高度。后者要求您事先知道图像高度。

Answer 2

您应该在span

中写入文本

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

并指定span的css

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