• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Überschrift positionieren

SpeedFreaK

Neues Mitglied
Hallo Leute!

Denke ich hab ein kleines Anfängerproblem oder ich
geh das ganze wahrscheinlich total verkehrt an?

Und zwar möchte ich eine Überschrift (h1) horizontal zentrieren
und vertikal sollte ein fester Wert einstellbar sein.

Mit h1 {text-align:center;} wäre die erste Hürde schon geschafft nur
Vertikal fehlt eben der gewisse Abstand.
Verwende ich stattdesen h1 {position:absolute;top:100px;left:200px;}
ist zwar alles schön definierbar nur "wandert" die Überschrift bei
Veränderung der Grösse vom Browserfenster eben vertikal nicht mit und bleibt
eben auf den vorgegebenen Werten.

Ich hoffe ich konnte mein Problem halbwegs verständlich beschreiben und danke schonmal
für eure Hilfe.

P.s. Mithilfe von <br /> für den vertikalen Abstand plus h1 {text-align:center;} ist alles so wie gewollt, aber
ich denke das muss sich wahrscheinlich eleganter lösen lassen,oder?

lg.Thomas
 
die lösung für den vertikalen abstand ist margin:

Code:
h1 { margin: 200px auto 0 auto; }

dieser code platziert die überschrift in der mitte des übergeordneten elements (was vermutlich body sein könnte, also das browser fenster) und mit einem abstand von 200px vom oberen fensterrahmen.

ich hoffe mal ich habe dich nciht etwa falsch verstanden... :mrgreen:
 
Danke für die rasche Hilfe!

Leider bewegt sich die Überschrift nicht mit "auto" und klebt nun
am linken Rand. Hab's nun auch mit { margin-left: auto; } und
{ margin-left: auto; margin-right: auto; } versucht, aber leider
keine Veränderung. Die 200px allerdings funktionieren.

lg.Thomas
 
Versuch mal
HTML:
h1{margin:0 auto;
margin-top:200px;
}
Das funktioniert meines Wissens aber nur, wenn kein übergeordnetes Element eine Breitenangabe (außer 100%) hat. Sonst einfach mit text-align und margin-top arbeiten, für eine Überschrift denke ich ohnehin besser geeignet...
 
Jawohl, das funkt tadelos!!

Die Lösung ist - wie von Trüffelkrieger empfohlen
h1 { text-align:center; margin-top:20px; }

Vielen dank Leute
 
Zurück
Oben