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

Question

我有一个在我的网页中多次使用的按钮。按钮样式将如下

1. 带有文本和图像的按钮。
2. 只有图像的按钮。
3. 只有文本的按钮。

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

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

我怎样才能做到这一点？？

Answer 1

vertical-align: bottom在<img>or 上使图像和文本的行高相等。后者要求您事先知道图像高度。

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

并指定跨度的 css

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