Div Layout mittig ausrichten

Flyde · 31. Oktober 2007

Mir ist das scho fast peinlich, ich mach nu scho monatelang Div Layouts (bin von den tables heile weggekommen

) aber ich weiß immer noch nicht wie ich meinen Wrap in die Mitte bekomm.

Align funzt nicht, text-align vererbt auf die Texte die in dem Wrap sind und das mit margin auszurichten, finde ich ein wenig zu komplex für eine einfache mittige ausrichtung.

Ich denke mal die antwort liegt auf der Hand und ich bin einfach mal wieder viel zu kompliziert denkend als das es mir einfallen könnte *gg*

Nja warte auf die Antwort, danke im voraus

Mfg Flyde

Zweipunktnull · 31. Oktober 2007

HTML:

<div id="wrapper" style="margin: auto"></div>

Flyde · 31. Oktober 2007

Irgendwie stört mich das jetzt oO
Bei auto hätte ich mir eine automatische anpassung des margins zwischen 2 divs oder so vorgestellt.. aber niemals das es von links und rechts automatisch gleichviel reinschiebt

Aber danke.
War also doch als vormeiner Nase

Zweipunktnull · 31. Oktober 2007

>> Bei auto hätte ich mir eine automatische anpassung des margins zwischen 2 divs oder so vorgestellt

Im Prinzip hast du vollkommen Recht. So ist es. Es wird in der Mitte des Elternelements positioniert. Und tja, wenn da kein weiteres div drum ist, dann ist halt das Browserfenster das elternelement, in dessen mitte das div dargestellt wird.

Dr. Wuah · 2. November 2007

also ich hab ein ähnliches problem und bei mir will das einfach nicht klappen.

Ich stell einfach mal den kleinen Code rein, und vielleicht sieht ja einer von euch den Fehler...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
	   
<html>
<head>
<title>L.R. Corporation</title>
<style type="text/css">
body { background-image: url(/images/bg.png);}

div#logo {
margin: auto;
border: 0;
}

</style>
</head>

<body>

<div id="logo">
<p><a href="./home.htm"><img src="/images/logo.png" alt="logo" style="width:242; height:384"></a></p>
</div>

</body>
</html>

Das Problem ist, dass das Logo einfach links oben im Eck angezeigt wird...und es soll ja mittig sein

dummix · 2. November 2007

Der korrekte Wert muss 0 auto lauten, also

Code:

margin: 0 auto;

Dr. Wuah · 2. November 2007

danke für deine Antwort!

Aber irgendwie zeigt das keine Wirkung. Das ganze kommt einfach nicht in die Mitte....

Ihr könnt euch das ganz ja mal anschaun und zwar hier:
www.lr-corporation.pytalhost.de

---
Ok wenn ich das so änder

Code:

div#logo {
margin: 0 auto;
width: 242px;
height: 384px;
}

Dann wirds schonmal Horizontal zentriert...ich will das ja aber in der Mitte des Bildschirms...

Zweipunktnull · 2. November 2007

Du musst für div#logo natürlich noch eine Breite angeben. Ansonsten wird ja die maximale Breite genommen.

>> Der korrekte Wert muss 0 auto lauten

Nein. Das Andere ist auch vollkommen korrekt.

Dr. Wuah · 2. November 2007

ja ok, das mit der breite hab ich sogar gleichzeigit mit dir rausgefunden

(siehe Edit)

Aber trotzdem klappts nicht....wie gesagt ich bekomme es so nicht in die Mitte der Seite obwohl das doch total seltsam ist.

Der Wert auto besagt doch, das der Außenabstand von jeder Seite des <div> gleichgroß ist oder? Das bedeutet es müsste eigentlich klappen, und drum versteh ich langsam nicht mehr was ich da machen soll...

markus1234 · 2. November 2007

Du kannst auch ne formel dafür nehmen .. x als totale länge Minus der halben länge des einzufügenden, zentrierenden Containers. Glaub das hat bei mir früher schonmal funktioniert.

mfg,
Markus

Zweipunktnull · 2. November 2007

Wenn du's zusätzlich noch vertikal willst, dann nimm folgenden Code.

Code:

div#logo {
  width: 242px;
  height: 384px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -192px;
  margin-left: -121px;
}

Dr. Wuah · 2. November 2007

okay vielen Dank, es hat funktioniert!

dummix · 2. November 2007

Soweit ich weiß, darf der Wert auto nur in Vebindung mit 0 bei margin stehen.

Also ich habe habe es bisher so gehandhabt:
Elternelement - text-align: center;
betroffenes Element - margin: 0 auto;

Flyde · 2. November 2007

also ich hab es einfach mit margin: auto; gemacht und mein wrap is in opera, ie6 + 7 und firefox in der mitte ^^ und css w3 check geht auch in ordnung

KonKorT · 3. November 2007

Das Problem scheint der Dokotype. Ersetz mal

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
	   
<html>

mit:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Prinzipiell reicht überdies margin: auto aus, margin: 0 auto; setzt nur noch fest, dass top und bottom auch auf Null sind, für die horizontale Ausrichtung hat das allerdings keine Gewichtung.

Adagio · 3. November 2007

Der Doctype 4 ist völlig in Ordnung und lässt den IE6 auch im Standardmodus arbeiten.

Suche

Div Layout mittig ausrichten

Flyde

Cadet 4th Year

Zweipunktnull

Commander

Flyde

Cadet 4th Year

Zweipunktnull

Commander

Dr. Wuah

Lt. Commander

dummix

Lt. Junior Grade

Dr. Wuah

Lt. Commander

Zweipunktnull

Commander

Dr. Wuah

Lt. Commander

markus1234

Banned

Zweipunktnull

Commander

Dr. Wuah

Lt. Commander

dummix

Lt. Junior Grade

Flyde

Cadet 4th Year

KonKorT

Lt. Commander

Adagio

Gast

Ähnliche Themen