Vertikales Ausrichten - IE10-Flex-box nicht funktioniert

Habe ich meine Mitte ausrichten funktioniert in allen Browsern, die es unterstützen, abgesehen von IE10. Ich denke, dass ich die syntax korrekt ist, und dass es unterstützt es. Könnte mir jemand helfen? DEMO

html {
    height: 100%;
}
body {
    background: red;
    font-family: 'Open Sans';
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    text-align: center;
}
.box {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    margin: 0 auto 20px;
    position: relative;
    width: 930px;
}
  • Btw, müssen Sie nicht angeben Zeile in horizontaler Richtung, es sei denn, Sie überschreiben einer vorherigen Spalte/vertikaler Richtung anderswo. Zeile/horizontal ist die Standardeinstellung.
InformationsquelleAutor 2ne | 2013-06-06
  1. 12

    Haben Sie den richtigen Wert anzeigen, aber alle anderen Flexbox-Eigenschaften, die Sie verwenden, falsch sind. Die richtige übersetzung würde so sein:

    body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

    Jedoch, wenn Sie mit Flexbox für die vertikale Ausrichtung Zwecke, könnte dies sein, was Sie brauchen statt:

    body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;

  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

    Beachten Sie, dass box-align und flex-align/align-items sind nicht entsprechenden Eigenschaften, aber Sie sind die gleiche Aufgabe durchführen hier.

    • Ich hatte zum hinzufügen von height: 100% anstelle von min-height, wie es war, nicht funktioniert. Jetzt ist es in Ordnung im IE, aber im Firefox habe ich eine imaginäre 8px oberen Rand auf den Körper. Ich habe einen reset an meinem Projekt also weiß ich nicht, wo dies sein könnte, aus
    • Es ist ein Firefox-bug
    InformationsquelleAutor cimmanon
  2. 3

    Hinzufügen einer expliziten Höhe scheint die geeignete Lösung.

    Aus: Microsoft Connect - Min-height und flexbox (flex-direction:column) arbeiten nicht zusammen im IE 10 & 11-Vorschau

    In allen anderen Browsern, die Unterstützung flexbox, ein flex-direction:column basierte flex-container wird zu Ehren der Container min-height zu berechnen flex-grow Längen. Im IE10 & 11-Vorschau, es scheint nur zu arbeiten, mit einer expliziten height Wert.

    • Einfache und gut dokumentierte Antwort! Sehr nützlich sind.
    InformationsquelleAutor Ariella
Schreibe einen Kommentar