barî: text in layer in der Mitte anordnen (center, middle)

Hallo,

ich habe wieder eine vielleicht einfache frage, habe es aber bis jetzt nicht hingekriegt, und der Antworten auf meine Suche im Web entsprechend scheint es nicht ganz so einfach zu sein:

Wie kann ich im externen css einen Text (bei mir den Titel der Homepage) in einem layer mittig anordnen (also nicht oben, wo er automatisch zu stehen kommt) ?

hier meine Programmschritte im css:

.h1 { font-size: 35; font-variant:small-caps; font-weight: bold; letter-spacing: 0.2em; vertical-align: middle; }

#layer2 { position: absolute; left: 200px; width: 600px; min-height: 100px; text-align: center;}/*titel, vertical-align: middle;*/

ich habe probiert, vertical-align: middle sowohl in der class als auch in der id zu platzieren, hat aber beides nicht funktioniert; in der id hat immerhin text-align: center funktioniert.

Weiss jemand, was ich da schreiben muss, geht das überhaupt im css oder muss ich das im body des html-dokuments machen?

Besten Dank im Voraus!

  1. Hi,

    vertical-align bezieht sich normalerweise auf eine Zeile, wenn sich aber die Zeilenhöhe aus Deinem Text ergibt mach das keinen Sinn.

    Css bietet Dir display:table/table-row/table-cell, damit kannst Du Elementen das Table-Verhalten zuweisen und deren Inhalt über vertical-align auch mittig ausrichten. Ältere IE's bleiben aber aussen vor, hier musst Du ggf mit Javascript nachhelfen.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Hallo Joachim, besten Dank für deine Tipps. Bin ein Stück weiter gekommen, aber noch nicht am Ziel.

      Css bietet Dir display:table/table-row/table-cell, damit kannst Du Elementen das Table-Verhalten zuweisen und deren Inhalt über vertical-align auch mittig ausrichten. Ältere IE's bleiben aber aussen vor, hier musst Du ggf mit Javascript nachhelfen.

      meine Programmierung...
      div.td { display:table-cell; font: 35 small-caps helvetica,arial,sans-serif; font-weight: bold; letter-spacing: 0.2em; text-align: center; vertical-align: middle;}
      ...mit...
      #layer2 { position: absolute; left: 200px; width: 600px; min-height: 100px; }

      ...funktioniert insofern, dass der Titel alle Formate angenommen hat ( Ausnahme siehe P.S.), jedoch noch oben-zentriert anstatt middle (in der Mitte und zentriert) steht. Habe auch div.td {display:table-row; etc } probiert mit selbem Resultat.

      Im body:
      <div id="layer2" class="td">Titel</div>

      Mein Browser ist das Neueste von SeaMonkey (2.11, eben noch heruntergeladen).
      Wo liegt der Fehler?

      Vielen Dank und Gruss,
      bari.

      P.S. mit Ausnahme, dass ich bold nicht in font: integrieren konnte, sondern extra mit font-weight:bold; schreiben musste, keine Ahnung warum, aber das ist nicht das Problem, solange es im css funktioniert)

      1. Hi,

        div.td
        #layer2
        <div id="layer2" class="td">Titel</div>
        extra mit font-weight:bold

        Oje, oje, oje …

        Warum nimmst du dir nicht die „SELFHTML-Wolke“ als Vorbild für zentrierten Text? Sie funktioniert und ist fachlich einwandfrei. Lasse dich doch nicht von der Formatierung abschrecken, alles für dich Überflüssige kannst du doch ändern oder löschen.

        Ciao, Performer

        1. Hello,

          Oje, oje, oje …

          ja, das sind halt die Freuden und Leiden eines Anfängers, wie ich es bin...

          Warum nimmst du dir nicht die „SELFHTML-Wolke“ als Vorbild für zentrierten Text? Sie funktioniert und ist fachlich einwandfrei. Lasse dich doch nicht von der Formatierung abschrecken, alles für dich Überflüssige kannst du doch ändern oder löschen.

          habe deinen Tip nicht verschmäht, doch weil ich bisher mit dem andern Vorschlag besser zurecht zu kommen glaubte, mich diesem gewidmet. Probiere nun deinen Vorschlag aus.

          Was mich auch noch abgehalten hat, ich muss ja nur einen kleinen Teil im Kopf meiner Homepage dafür definieren, nicht die ganze Seite, - ist mir nicht ganz klar.

          Besten Dank,

          bari.

  2. Hi,

    Wie kann ich im externen css einen Text (bei mir den Titel der Homepage) in einem layer mittig anordnen (also nicht oben, wo er automatisch zu stehen kommt) ?

    Vielleicht mit der SELFHTML-Wolke?

    Ciao, Performer