Rand oben und Rand unten funktioniert nicht, wenn ich versuche, vertikal zu zentrieren

versuche, meinen roten Block in der Mitte der Webseite und den Fußblock am unteren Rand des roten und schließlich den weißen zwischen den oberen zu zentrieren des roten Blocks und der Fußzeile. Rand-Top funktioniert nicht aus irgendeinem Grund, obwohl links und rechts sind ..Rand oben und Rand unten funktioniert nicht, wenn ich versuche, vertikal zu zentrieren

Kopierte meinen Code aus einer lokalen Datei, so gibt es einige tote Links, aber ich denke, sie sind irrelevant auf CodePen, wie es immer noch angezeigt wird das Gleiche.

#container { 
    display:block; 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    border:solid black; 
    border-width: 3px; 
    border-radius:5px; 
    background-color:red; 
    height:650px; 
    width:850px; 
    padding:1px; 
} 

#container.hover { 
} 

.wrapper { 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    margin-bottom:auto; 
    height:450px; 
    width:650px; 
    background-color:white; 
    border:solid black; 
    border-width:1px; 
} 

#grid { 
    display:inline-block; 
    float:left; 
    background-color:white; 
    height:10px; 
    width:10px; 
    border: solid black; 
    border-width:.5px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top: auto; 
    margin-bottom: auto; 
    padding:.5px .5px .5px .5px; 
} 

#foot { 
    display:block; 
    height:90px; 
    border:solid black; 
    border-width: 2px; 
    margin-top:auto; 
}

http://codepen.io/Kennpow/pen/bpJRvw

Quelle

2016-05-13 KenP

Haben Sie versucht, margin: auto; '? –

Mögliches Duplikat von [Rand oben/unten funktioniert nicht am Rand - links/rechts in einer Probe] (http://stackoverflow.com/questions/28960204/margin-top-bottom-not-works-the-to-to- margin-left-right-in-a-sample) –

Duplizieren http://stackoverflow.com/q/6775273/1028949 – Quantastical

ändern diese:

#container: { display:flex; }

EDIT/ADDITION:

andere Wrapper hinzufügen um die `#container‘ und geben sie diese Einstellungen:

#wrap_all { 
    display:flex; 
    height: 100vh; 
}

(Same, herausgegeben) codepen: http://codepen.io/anon/pen/GZLvpj

Quelle

2016-05-13 19:16:41 Johannes

Dies funktioniert gut Fuchs Zentrierung in der Box. Vielen Dank! Jetzt muss ich das Ganze in der Webseite zentrieren. – KenP

@KennyPower siehe meine aktualisierte Antwort und auch aktualisierten CodePen. – Johannes

Danke. Geschafft! – KenP

margin-top:auto und margin-bottom:auto funktioniert nicht so, wie Sie denken, sie zu margin-left:auto und margin-right:auto verglichen wird.

margin-top:automargin-bottom:auto und werden als 0 berechnet werden, während margin-left:automargin-right:auto und wird als gleich Pannen berechnet werden. Ich denke, es hat damit zu tun, wie der Browser die Seite rendert.

Von https://www.w3.org/TR/CSS2/visudet.html#normal-block:

Wenn 'margin-top' oder 'margin-bottom' sind 'auto', deren verwendete Wert ist 0.

Von https://www.w3.org/TR/CSS2/visudet.html#blockwidth:

Wenn sowohl 'margin-left' als auch 'margin-right' 'auto' sind, sind die verwendeten Werte gleich.

Quelle

2016-05-13 19:26:36

Rand oben und Rand unten funktioniert nicht, wenn ich versuche, vertikal zu zentrieren

Antwort

Verwandte Themen