✔ Text mittig ausrichten

Jennesta

Jennesta

Erfahrenes Mitglied
Hallo,
ich arbeite gerade an einer aufklappbaren Navigation, die stark der Lesezeichen-Liste aus dem Firefox ähnelt.

Bevor ich ein 16x16 px großes Bild eingefügt habe war der Text wunderbar ausgerichtet
Zeile 20px hoch und wurde definiert durch "font: 11px/20px;"

Nun mit dem Bild ist diese Zeile unerwartet größer geworden (ich vermute, weil ich das Bild innerhalb des a-Tags eingebunden habe) dies kann ich noch verkraften.
Mich stört nun allerdings, dass sich der Text immer an der Unterseite des Bildes orientiert, wodurch der Text nicht mehr vertikal mittig ist.

Leider funktioniert es nicht, das Bild außerhalb des a-Tags zu machen, weil so immer ein ungewollter Zeilenumbruch entsteht.
Hat hier zufällig jemand einen heißen Tipp für mich?

Gruß Jennesta
 
Hi, mit was kann ich die Grafik noch ausrichten? Bisher habe ich es mit

style="width:16px;height:16px;border:0px;padding:0px;margin-top:4px;"

versucht. Aber der gewünschte Effekt ist ausgeblieben. Ich habe auch schon versucht vorher wo in der Navigation "display:block" definiert wurde versucht mit inline-block zu arbeiten, aber leider entstellt jeder Versuch den Rest ;)
 
Oh sry...ich weiß nicht obs an meinem Browser liegt aber ich kann die Links von normalem Text nicht unterscheiden. Danke ich versuchs mald amit.
 
Jennesta hat gesagt.:
ich weiß nicht obs an meinem Browser liegt aber ich kann die Links von normalem Text nicht unterscheiden.
Zum Vergrößern anklicken....
Kann dir nicht folgen, denn:
Jennesta hat gesagt.:
ich arbeite gerade an einer aufklappbaren Navigation [...]

Bevor ich ein 16x16 px großes Bild eingefügt habe war der Text wunderbar ausgerichtet

Nun mit dem Bild ist diese Zeile unerwartet größer geworden (ich vermute, weil ich das Bild innerhalb des a-Tags eingebunden habe) dies kann ich noch verkraften.
Mich stört nun allerdings, dass sich der Text immer an der Unterseite des Bildes orientiert, wodurch der Text nicht mehr vertikal mittig ist.
Zum Vergrößern anklicken....
Wenn es sich um keinen Link, sondern um reinen Text handelt, lautet die Regel eben:
CSS: 
img { vertical-align:middle; }
die im Falle eines Links aber gleichermaßen genutzt werden kann.

Mein Erstvorschlag war eben auf die Navigation spezifiziert, die in den <a>-Elementen ein <img>-Element enthält.

mfg Maik
 
Ne das mit dem Link vom Text unterscheiden war hier aufs Forum bezogen. Hatte in deinem vorherigen Post nicht erkannt, dass du Links gepostet hattest. :D
Tut mir Leid das ich dich damit verwirrt habe.
Also ich habe im image-tag nun ein "align='middle" stehen...und der Text ist auch nach oben gerutscht, leider jedoch nun das Problem nur anders. Und zwar hängt nun die Oberkante des Bildes immer mit der Oberkante des Textes zusammen.

Also vielleicht habe ich ja auch ne etwas blöde Navigation entworfen, die nicht alles schafft, was ich gerne möchte. Ich habe die nämlich von hier übernommen und versuche die recht pixelgenau meinen vorstellungen umzubauen -> http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html#vstart
 
Okay, damit wären ja die Unklarheiten geklärt :-)

Poste doch bitte mal den Link zu deiner Seite, damit deine Umbaumaßnahme näher begutachtet werden kann.

mfg Maik
 
So wie ich das jetzt überblicke, sitzt das Grafikelement am unteren Rand des Menüpunktes.

Lösung:
Code: 
<img src="graphics/google.jpg" style="width:16px;height:16px;border:0px;vertical-align:middle;margin-bottom:2px;" />


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück