Ausrichten von Bildern mit Text

Question

ich will zum Zentrum ein Bild von 18px Höhe mit Text ausrichten daneben. Hier ist der Code ich benutze:

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

Mit diesem Code, die div-Container mit einer Höhe von 19px gemacht wird anstelle von 18px und Text wird nicht mit Bild zentriert. Ich habe versucht, auf Safari 4 und Firefox 3.6. Was ist der Grund für diese 1 px?

Danke

Answer 1

1. Vergessen Sie nicht, Stile zurücksetzen (Rand / padding): div, img, Span { margin: 0; padding: 0; border: 0}
2. Für vertical-align zu arbeiten, Ihre Elemente muss mich inline.
3. Eine klassische Wahl Text ausrichten vertikal ist eine Zeilenhöhe zu geben, gleich Behälter.

Zum Beispiel:

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

Answer 2

Vielleicht haben Sie eine Grenze irgendwo dort müssen Sie auf Null Breite loszuwerden oder eingestellt?

Answer 3

ich bin nicht ganz sicher, ob ich verstehen, was das Problem ist, aber wenn es nur, dass das Bild ein paar Pixel aus ist, wo Sie es möchten sein, dann, warum Sie nicht nur das Bild positionieren relativ. zum Beispiel:

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

dadurch wird das Bild Schalten von 2px, von wo es ursprünglich war.