Vertikale Positionierung von Texten

W

weedo

Erfahrenes Mitglied
Hallo,

da ich jetzt knapp 1 Stunde an folgendem Problem verzweifel, wollte ich euch mal zu Rate ziehen.

Im Anhang habe ich einen Ausschnitt meiner Navigation...nun möchte ich jedoch den Text in der Mitte der Zelle haben und nicht on Top.

Hier der dazugehörige Auszug aus meinem Quelltext:

HTML: 
<!-- navi Start //-->
      <div style="background:url(Bilder/index_18.gif); width: 198px">
        <img src="Bilder/index_14.gif" width="198" height="28" alt="">
          <div style="height:27; vertical-align: middle;">
            &nbsp;&nbsp;&nbsp;navigation1
          </div>
        <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
      <div style="background:url(Bilder/index_18.gif); width: 198px">
        <div style="height:27; vertical-align: middle;">
           &nbsp;&nbsp;&nbsp;navigation2
        </div>
        <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
        <div style="background:url(Bilder/index_18.gif); width: 198px">
          <div style="height:27; vertical-align: middle;">
            &nbsp;&nbsp;&nbsp;navigation3
          </div>
      <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
    <!-- navi ende //-->

Für Hilfe wäre ich sehr Dankbar.

lg weedo
 

Anhänge

  • tutorials.jpg
    tutorials.jpg
    22,2 KB · Aufrufe: 16
Probiers mal so:

HTML: 
<!-- navi Start //-->
      <div style="background:url(Bilder/index_18.gif); width: 198px">
        <img src="Bilder/index_14.gif" width="198" height="28" alt="">
        <div style="height:27px;  line-height:27px;">
            &nbsp;&nbsp;&nbsp;navigation1
          </div>
        <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
      <div style="background:url(Bilder/index_18.gif); width: 198px">
        <div style="height:27px;  line-height:27px;">
           &nbsp;&nbsp;&nbsp;navigation2
        </div>
        <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
        <div style="background:url(Bilder/index_18.gif); width: 198px">
        <div style="height:27px;  line-height:27px;">
            &nbsp;&nbsp;&nbsp;navigation3
          </div>
      <img src="Bilder/index_20.gif" width="198" height="2" alt="">
      </div>
    <!-- navi ende //-->
 
Naja 27px ist für line-height zwar etwas sehr groß aber mit 9 sieht es hervorragend aus :)

Danke für den Tipp. Schönen Tag noch ;)

//edit

Sorry 27 ist natürlich richtig...ich hatte noch einen Zeilenumbruch drinne...deshalb war 9 Besser :)
 
Zuletzt bearbeitet:
weedo hat gesagt.:
Naja 27px ist für line-height zwar etwas sehr groß aber mit 9 sieht es hervorragend aus :)
Zum Vergrößern anklicken....
Naja, die Zeilenhöhe hast du hier mit deinem vorgestellten Code doch selbst vorgegeben :suspekt:
Code: 
<div style="height:27; vertical-align: middle;">
Zum Vergrößern anklicken....

vertical-align greift übrigens bei Blockelementen nur in Verbindung mit der display-Eigenschaft und einem Tabelleneigenschaftswert - Browserkompatibiltät vorausgesetzt, die der IE in der aktuellen 8er-Baureihe noch immer nicht erfüllt.

mfg Maik
 
Wenn ich jetzt aber einen einfachen <br> einfüge, lässt der ja auch 27px frei... das war eher weniger mein Ziel.

Mitlerweile hab ich height auch zu min-height umgeändert, da ich ja in das gleiche Feld auch noch Unternavigationspunkte einbauen will... und die sehen mit solch einem riesigem Abstand eher schlecht als recht aus...
 
Natürlich würde es mir was bringen wenn ich mich damit mal auseinander setze...Aber momentan habe ich leider nicht besonders viel Zeit für sowas.

Gibt es nicht eine einfachere Lösung, wie ich mit dem Code, den ich bereits jetzt zurechtgeschrieben habe so verwenden kann, wie ich es gerne hätte?
 
Die "einfachere" Lösung findest du in meinen beiden letzten Linkempfehlungen, denn die line-height-Deklaration gilt für jede Zeile innerhalb des Elements, also auch für jedes <br>, das du da einfügen möchtest, um eine neue Zeile im Textfluß zu erzeugen.

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

Neue Beiträge

Zurück