Tenho um botão HTML simples que contém texto e uma imagem:

HTML: (Já emhttp: //jsfiddle.net/EFwg)

<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle;}
span.Button img {vertical-align:middle;}

Não consigo criar uma combinação que atenda a esses requisitos:

A imagem e o texto precisam estar na vertical no meio da div, com o texto no meio da imagem. Deve estar arrumado.Horizontalment - a imagem pode estar emqualquer largura e o botão deve aumentar para mostrá-lVerticalment - a imagem pode estar em qualquer altura, menor ou maior que o botão. Quando a imagem é maior, não me importo se os pixels extras forem exibidos ou cortados, desde que estejam centralizado O botão está em uma altura fixa. Atualmente eu usoline-height para centralizar o texto. O botão deve ficar bem alinhado com outros botões e text A solução precisa funcionar em todas as versões mais recentes dos principais navegadores e no Internet Explorer 8.

Aqui está um jsfiddle com o meu código atual:http: //jsfiddle.net/EFwg
(observe que o pequeno ícone está um pouco abaixo do centro do botão)