holli: Text neben Icon/Button

Hallo,
ich glaube die Frage ist recht simpel, aber leider steh ich auf der Leitung.

Ich möchte als Beispiel neben einem Icon/Button z. B. ein PDF Symbol oder Pfeil einfach einen einzeiligen Text oder nur ein bis 2 Worte platzieren. Leider ist die Grafik höher wie der Text, so dass er den Text oben ausrichtet und nicht mittig zum Symbol.
Wie kann ich den Text ausrichten.

<p><img src="pdficon.gif" alt="" align="left" width="36" height="28" /><a href="test.pdf">test.pdf</a></p>

Gruss
Holli

  1. Hallo holli,

    Ich möchte als Beispiel neben einem Icon/Button z. B. ein PDF Symbol oder Pfeil einfach einen einzeiligen Text oder nur ein bis 2 Worte platzieren. Leider ist die Grafik höher wie der Text, so dass er den Text oben ausrichtet und nicht mittig zum Symbol.
    Wie kann ich den Text ausrichten.

    es wäre geschickter, das Bild via CSS als Hintergrundgrafik für das a-Element (ggf. mit entsprechender class) zu definieren (background-position hilft beim positionieren), verbunden mit einem padding an entsprechender Stelle.

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
  2. Hi,

    Ich möchte als Beispiel neben einem Icon/Button z. B. ein PDF Symbol oder Pfeil einfach einen einzeiligen Text oder nur ein bis 2 Worte platzieren. Leider ist die Grafik höher wie der Text, so dass er den Text oben ausrichtet und nicht mittig zum Symbol.
    Wie kann ich den Text ausrichten.

    Dafür gibt die CSS-Eigenschaft "vertical-align:middle", die du auf's Bild anwenden musst.

    <p><img src="pdficon.gif" alt="" align="left" width="36" height="28" /><a href="test.pdf">test.pdf</a></p>

    Entspr. align als HTML-Eigenschaft nicht float? dann soll der Text die Grafik also umfließen? Du mustt dich entscheiden: entweder das Bild kommt in die gleiche Zeile wie der Text (dann kannst du es mittg ausrichten), oder du lässt den Text frumrumfließen. Was soll eigentlich der Quatsch mit dem alt="" zwischen den Anführungsstrichen sollte Text stehen!
    Und bitte entferne das align="left". Wenn der Text um die Grafik fließen soll, dann mit CSS und float!

    Einen schönen Donnerstag noch!

    --
    Mein Lieblings-Browser:
    Firefox 1.5
    Mein Lieblings-Notepad:
    Notepad 2