Wie kann ich Text neben einem Bild in HTML / CSS vertikal zentrieren?

Was ist der beste und einfachste Weg, um Text neben einem Bild in HTML vertikal zu zentrieren? Muss Browser-Version / Typ Agnostiker sein. Eine reine HTML / CSS-Lösung.

Dies könnte Ihnen den Einstieg erleichtern.

Ich greife immer auf diese Lösung zurück . Nicht zu hackig und erledigt den Job.

BEARBEITEN: Ich möchte darauf hinweisen, dass Sie mit dem folgenden Code den gewünschten Effekt erzielen können (verzeihen Sie die Inline-Stile; sie sollten sich in einem separaten Blatt befinden). Es scheint, dass die Standardausrichtung auf einem Bild (Grundlinie) dazu führt, dass der Text an der Grundlinie ausgerichtet wird. Wenn Sie diese Option auf "Mittel" setzen, werden die Dinge zumindest in FireFox 3 gut gerendert.

<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" style="vertical-align: middle;" width="100px"/>
    <span style="vertical-align: middle;">Here is some text.</span>
</div>

Schließt "reines HTML / CSS" die Verwendung von Tabellen aus? Weil sie leicht tun, was Sie wollen:

<table>
    <tr>
        <td valign="top"><img src="myImage.jpg" alt="" /></td>
        <td valign="middle">This is my text!</td>
    </tr>
</table>

Flamme mich, was du willst, aber das funktioniert (und funktioniert in alten, ruckeligen Browsern).

Es gibt verschiedene Möglichkeiten: Verwenden Sie das Attribut des Bild-Tags align = "absmiddle" oder suchen Sie das Bild und den Text in einem Container DIV oder TD in einer Tabelle und verwenden Sie

style="vertical-align:middle"

Das macht Spaß. Wenn Sie die Höhe des Textcontainers im Voraus kennen, können Sie eine Zeilenhöhe verwenden, die dieser Höhe entspricht. Der Text sollte vertikal zentriert werden.

Es gibt mehrere Möglichkeiten:

• Sie können die Zeilenhöhe verwenden und sicherstellen, dass sie als enthaltendes Element hoch ist
• Verwenden Sie Anzeige: Tabellenzelle und vertikale Ausrichtung: Mitte

Meine bevorzugte Option wäre die erste, wenn es sich um einen kurzen Raum handelt, oder die letztere auf andere Weise.

Ich empfehle die Verwendung von Tabellen mit <td valign="middle">(wie inkedmn erwähnt, funktioniert es in allen Browsern), aber wenn Sie mit einem Link umbrechen , gehen Sie wie folgt vor (funktioniert auch in hässlichen alten Browsern wie Opera 9):

<a href="/" style="display: block; vertical-align: middle;">
    <img src="/logo.png" style="vertical-align: middle;"/>
    <span style="vertical-align: middle;">Sample text</span>
</a>

Eine grundlegende Möglichkeit, die mir in den Sinn kommt, besteht darin, das Element in eine Tabelle einzufügen und zwei Zellen zu haben, eine mit dem Text, die andere mit dem Bild, und style = "valign: center" mit den Tags zu verwenden.