nicht angemeldet
Elemente zentrieren
Hallo,
ich steh grade ziemlich auf der Leitung und hoffe Ihr könnt mir helfen.
Ich möchte mit CSS eine Graphik zentrieren. Im Archiv hab ich gefunden, dass das mit margin-left:auto und margin-right:auto geht.
Aber bei mir funktioniert das leider nicht und die Graphik bleibt weiterhin in der linken, oberen Ecke.
So hab ich es bisher versucht:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Test</title>
<meta name="author" content="Standard">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="margin-left:auto; margin-right:auto">
<img src="images/abfahrt.gif" width="50" height="20" alt="" border="0">
</div>
</body>
</html>
Was hab ich denn vergessen?
Danke und Gruss
Alexa
-
hallo alexa,
<div style="margin-left:auto; margin-right:auto">
1. die "style"-Angaben willst du also gleich für das ganze DIV haben und nicht nur für die Grafik ?
2. solange du "auto" angibst, wird natürlich die "default-Einstellung verwendet, also links oben. Setze statt "auto" irgendwelche Werte wie 100px und schau mal nach, was passiert.Christoph S.
-
Moin!
<div style="margin-left:auto; margin-right:auto">
1. die "style"-Angaben willst du also gleich für das ganze DIV haben und nicht nur für die Grafik ?Das ist durchaus sinnvoll.
2. solange du "auto" angibst, wird natürlich die "default-Einstellung verwendet, also links oben. Setze statt "auto" irgendwelche Werte wie 100px und schau mal nach, was passiert.
Nö. "margin:auto" zentriert einen Bereich, das ist ok so. Natürlich nicht, solange der Bereich selbst so breit ist wie die zur Verfügung stehende Fläche, aber grundsätzlich ist "margin:auto" die Art, Blockelemente zu zentrieren. Allerdings gehts so erst ab IE 6 (die 5er können das noch nicht). Und (na klar) NS 4 kanns auch nicht.
- Sven Rautenberg
-
hallo alexa,
Du kannst auch dem <div> eine bestimmte Breite geben und dann 'margin:auto' verwenden; oder gleich 'text-align:center' nehmen.
jd
-
-
Moin!
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Test</title>
<meta name="author" content="Standard">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="margin-left:auto; margin-right:auto"><div style="width:50px; margin-left:auto; margin-right:auto;">
<img src="images/abfahrt.gif" width="50" height="20" alt="" border="0">
</div>
</body>
</html>Was hab ich denn vergessen?
Das DIV ist, wenn keine Breitenangabe erfolgt, immer so breit, wie der maximal zur Verfügung stehende Platz. Links und rechts sind dann keinerlei Ränder mehr, deren automatische Verbreiterung für eine Zentrierung sorgen könnte.
Das obige Beispiel funktioniert auch nur im IE6, NS6/Mozilla und Opera.
margin:auto zentriert das Element innerhalb des äußeren Elements. Vielleicht hilft aber auch, das Bild innerhalb des DIVs zu zentrieren:
<div style="text-align:center;">
Im Zweifel hilft es immer, mit "background:farbe" dem Layer mal etwas mehr Sichtbarkeit zu verleihen, damit man sieht, wo es überall ist und wie groß.
- Sven Rautenberg
-
Hallo,
danke für Eure Antworten.
<div style="text-align:center;">
So hat es jetzt geklappt...ich dachte, damit könnte man nur Text zentrieren, und vorhin ging es damit auch nicht, aber da war wohl was anderes falsch ;-)
Was aber nicht ging ist vertical-align:middle, auch wenn ich als Höhe 50% angeb.Im Zweifel hilft es immer, mit "background:farbe" dem Layer mal etwas mehr Sichtbarkeit zu verleihen, damit man sieht, wo es überall ist und wie groß.
Guter Tip, werd ich mir mal merken, auch wenns beim NS 4 mal wieder witzig aussieht *g*
Alexa
-
hi
Was aber nicht ging ist vertical-align:middle, auch wenn ich als Höhe 50% angeb.
vertical-align geht (leider) nach der CSS-Spez nur bei Tabellenzellen.
Grüße aus Bleckede
Kai
-
-
-
hi
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "DTD/html4-loose.dtd">
..sonst kennt der MSIE eh keinen margin:auto;
ansonsten -> siehe Sven
Grüße aus Bleckede
Kai