DIV im Body zentrieren

[mikethet]

Hallo,

habe den Body im Viewport(HTML) zentriert.

Darin, will ich ein DIV mit fix vorgegebener Breite und Höhe zentrieren.

Verwende dazu margin: auto;

Hier der Code:

  
html, body {padding: 0; margin: 0; height: 100%; width: 100%;}  
			  
			html {background-color: white;}		  
				  
			body {margin: 0 auto;  
				  min-width: 800px;  
				  max-width: 1000px;  
				  background-color: lightgrey;  
				  border: 2px groove black;  
				  -webkit-box-sizing: border-box;  
				  -moz-box-sizing: border-box;  
				  box-sizing: border-box;}  
			  
			  
			#clickarea {height: 400px;  
						 width: 400px;  
						 background-color:lightblue;  
						 margin: auto;  
						 }  

Da ich eine fixe Höhe und Breite habe, sollte er doch mit margin: auto das DIV ohne Probleme zentrieren. Tut er aber nicht. Wo liegt mein Denkfehler?

LG Mike

[Siri]

Hallo,

Da ich eine fixe Höhe und Breite habe, sollte er doch mit margin: auto das DIV ohne Probleme zentrieren. Tut er aber nicht.

Was tut er denn stattdessen?

Viele Grüße
Siri

[mikethet]

Da ich eine fixe Höhe und Breite habe, sollte er doch mit margin: auto das DIV ohne Probleme zentrieren. Tut er aber nicht.

Was tut er denn stattdessen?

Hallo, Horizontal zentriert er das DIV. Vertikal setzt er es an den oberen Rand des Body bzw. Viewport.

LG

[Gunnar Bittersmann]

@@mikethet:

nuqneH

Wo liegt mein Denkfehler?

Zum einen: “If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.” [CSS21 §10.6.3]

Zum anderen: Die Viewportbreite vieler Geräte ist kleiner als 800px. min-width: 800px ist also keine gute Idee.

Qapla'

[mikethet]

Zum einen: “If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.” [CSS21 §10.6.3]

Hallo Gunnar,

wenn ich dann nur margin-left und margin-right auf auto setzen und vertical-align auf middle. Tut sich trotzdem nichts. Verstehe auch das andere verlinkte Beispiel nicht?

Wäre nett wenn du es mir Erklären könntest.

Lg Mike

[Gunnar Bittersmann]

@@mikethet:

nuqneH

wenn ich dann nur margin-left und margin-right auf auto setzen und vertical-align auf middle. Tut sich trotzdem nichts.

Natürlich nicht.

“ 'vertical-align' […] Applies to: inline-level and 'table-cell' elements” [CSS21 §10.8]

Verstehe auch das andere verlinkte Beispiel nicht?
Wäre nett wenn du es mir Erklären könntest.

Was genau meinst du?

Qapla'

[mikethet]

Natürlich nicht.

“ 'vertical-align' […] Applies to: inline-level and 'table-cell' elements” [CSS21 §10.8]

Ah wie dumm von mir. Natürlich.

Mit vertical-align richte ich nicht ein Element zu seinem Elternelement vertikal mittig aus, sondern inline-Elemente mit unterschiedlicher Zeilen-Höhe.

Kann ich mir das so vorstellen, ein Text-Eingabefeld hat eine bestimmte Zeilenhöhe line-height, welche ich verändern und dann mit vertical-align das Text-Feld in seiner Zeile ausrichten kann?

Was genau meinst du?

Misterunkown hat ein Link gepostet, wo du bereits eine ähnliche Problematik erläutert hast. Da blicke ich nicht ganz durch.

LG Mike

[misterunknown]

Moin,

Tut er aber nicht. Wo liegt mein Denkfehler?

Doch, genau das tut er. Nur horizontal ist es schwierig etwas zu zentrieren, aber Gunnar hat hier eine Lösung parat (in ähnlichem Zusammenhang).

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

aber Gunnar hat hier eine Lösung parat

Hey, das war 2010. Meine Lösung 2012 wäre Flexbox. [CSS3FLEX, MDN]

Qapla'

[misterunknown]

Moin,

Hey, das war 2010. Meine Lösung 2012 wäre Flexbox. [CSS3FLEX, MDN]

Und wie steht es mir der Kompatibilität beider Lösungen?

Grüße Marco

[Ole.]

Moin,

Und wie steht es mir der Kompatibilität beider Lösungen?

Es gibt da einen Flexbox Polyfill Namens Flexie. Mangels Anwendung, kann ich allerdings nicht beurteilen wie gut der ist.

Gruß
Ole