Bild und Text innerhalb eines Links vernünftig ausrichten

[Nina]

Hallo an alle,
ich habe folgendes Problem: ich möchte innerhalb eines Links ein Bild und einen Text darstellen. Allerdings ist es so, dass der Text am unteren Rand des Bildes ausgerichtet wird.

Ich möchte jedoch, dass der Text vertikal mittig mit dem Bild ausgerichtet wird. Ich habe bereits im CSS "vertical-align" auf das den Link umgebende <div> angewendet, funktioniert aber trotzdem nicht. Ich würde für dieses Problem ungern eine Tabelle einsetzen.

Hoffentlich ist dieses Problem für Euch nicht zu "anfängerhaft" und ich hoffe mir kann hier jemand helfen.

Danke

Hier das code-snippet:
<div style="vertical-align:top;">
  <a href="#"><img src="../img/contact.gif" alt="Kontakt" title="" width="30" height="20">Kontakt</a>
</div>

Gruss
Nina

[MudGuard]

Hi,

Ich möchte jedoch, dass der Text vertikal mittig mit dem Bild ausgerichtet wird. Ich habe bereits im CSS "vertical-align" auf das den Link umgebende <div> angewendet, funktioniert aber trotzdem nicht. Ich würde für dieses Problem ungern eine Tabelle einsetzen.

Kann auch nicht funktionieren, da vertical-align für block-Elemente nicht zutrifft:
'vertical-align'
    Value:   baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
    Initial:   baseline
    Applies to:   inline-level and 'table-cell' elements

also nur für inline-Elemente und Tabellenzellen.

Ein Bild ist ein (replaced) inline-Element.

Was Du willst, ist, das _Bild_ nicht auf der Basislinie (Initialwert für vertical-align, s.o.) ausrichten, sondern vertikal mittig.
Wende also vertical-align auf das Bild an.

cu,
Andreas

[Nina]

Was Du willst, ist, das _Bild_ nicht auf der Basislinie (Initialwert für vertical-align, s.o.) ausrichten, sondern vertikal mittig.
Wende also vertical-align auf das Bild an.

Ja, Du hast recht. Habe ich bereits gemacht. Das war das einzigste, was ich nicht ausprobiert hatte. Aufs <a> Tag hatte ich es auch angewendet, hatte aber nicht funktioniert.
Ich habe angenommen, dass "vertical-align" auf block Elemente angewendet wird, nach dem Motto "Alles was sich in diesem Block befindet wird mittig angeordnet". War wohl falsch.

Noch ne Frage nebenbei: kann man "margin" auch auf inline Elemente anwenden?

Danke für die Hilfe.
Gruss
Nina

[MudGuard]

Hi,

Noch ne Frage nebenbei: kann man "margin" auch auf inline Elemente anwenden?

Du solltest Dir http://www.w3.org/TR/REC-CSS2/propidx.html als Bookmark/Favorit merken.

Dort kannst Du in der Spalte "applies to" ziemlich schnell rausfinden, daß margin keinerlei Einschränkungen unterliegt.

Und von dort kommst Du auch sehr schnell zu den Beschreibungen der einzelnen Eigenschaften.

cu,
Andreas

[Nina]

Du solltest Dir http://www.w3.org/TR/REC-CSS2/propidx.html als Bookmark/Favorit merken.

Super, danke nochmal.

[Nina]

Noch ne Frage:
was versteht man unter "replaced" elements?

[MudGuard]

Hi,

Noch ne Frage:
was versteht man unter "replaced" elements?

Auf der von mir genannten Seite gibt es ganz oben einen Link "index". Wenn Du dem folgst und dann zu "R" springst, findest Du einen Link zur Erklärung, was ein replaced Element ist: http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element

cu,
Andreas