Ich möchte ein Bild mit einer Höhe von 18px zentrieren und mit dem Text daneben ausrichten. Hier ist der Code, den ich benutze:
<div style="line-height:18px; font-size:12px;">
<img src="/images/somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
Mit diesem Code wird der div-Container mit einer Höhe von 19px anstelle von 18px gerendert und der Text ist nicht mit dem Bild zentriert. Ich habe Safari 4 und Firefox 3.6 ausprobiert. Was ist der Grund für diese 1 px?
Vielen Dank
Antworten:
0 für die Antwort № 1- Vergessen Sie nicht, die Stile zurückzusetzen (Rand / Polsterung): div, img, span { Rand: 0; Polsterung: 0; Grenze: 0}
- Damit die vertikale Ausrichtung funktioniert, müssen Sie Elemente Muss ich inline.
- Eine klassische Wahl zum Ausrichten von Text vertikal ist eine linienhöhe anzugeben gleich Container.
Beispielsweise :
<div><img src="/images/somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
0 für die Antwort № 2
Vielleicht haben Sie irgendwo dort einen Rand, den Sie entfernen oder auf Null setzen müssen?
0 für die Antwort № 3
Ich bin mir nicht ganz sicher, was ich versteheDas Problem ist hier, aber wenn das Bild nur ein paar Pixel von der Stelle entfernt ist, an der Sie es haben möchten, warum positionieren Sie das Bild dann nicht einfach relativ zueinander? Zum Beispiel:
<div style="line-height:18px; font-size:12px;">
<img src="/images/somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
Dadurch wird das Bild um 2px nach oben verschoben, wo es ursprünglich war.