Alinhando imagens com texto

Question

Eu quero centralizar alinhado uma imagem de altura de 18px com texto ao lado. Aqui está o código que eu uso:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>

Com esse código, o contêiner Div é renderizado com uma altura de 19px em vez de 18px e o texto não está centrado na imagem. Eu tentei no Safari 4 e no Firefox 3.6. Qual é a razão para isso 1 px?

Obrigado

Answer 1

1. Não se esqueça de redefinir os estilos (margem/preenchimento): div, img, span {margem: 0; preenchimento: 0; borda: 0}
2. Para que o alinhamento vertical funcione, seus elementos devo eu embutido.
3. Uma escolha clássica para alinhar o texto verticalmente é fornecer uma altura de linha igual ao contêiner.

Por exemplo :

<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>

Answer 2

Talvez você tenha uma fronteira em algum lugar lá, precisa se livrar ou definir com largura zero?

Answer 3

Não tenho certeza de que entendi qual é o problema aqui, mas se é apenas que a imagem é alguns pixels de onde você gostaria que fosse, então por que você não apenas posiciona a imagem relativamente. por exemplo:

<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>

Isso mudará a imagem por 2px de onde estava originalmente.