Como alinhar verticalmente uma imagem em tamanho desconhecido ao centro de uma div?
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)