vertikales ausrichten mit flexbox in IE11 und IE10

Wie man einen cross-browser-Lösung, wo ein element vertikal ausgerichtet?

http://jsfiddle.net/e2yuqtdt/3/

Das funktioniert in Firefox und Chrome, aber nicht im IE11

<div class="page_login">
    <div>vertical-align:center; text-align:center</div>
</div>

html, body {
    height:100%;
}

.page_login {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    min-height:100px;
    width:200px;
}

update

Wenn das element zentriert ist höher als der viewport-Höhe, der hintergrund ist nur 100% und nicht 100% - scroll-Höhe

http://jsfiddle.net/e2yuqtdt/8/

html, body {
    min-height:100%;
    height:100%;
}

.page_login {
    display:flex;
    min-height:100%;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}

InformationsquelleAutor clarkk | 2015-01-02

  1. 4

    Wie man einen cross-browser-Lösung, wo ein element ist die vertikale
    ausgerichtet?

    Werfen Sie einen Blick auf diese Geige: http://jsfiddle.net/5ry8vqkL/

    Angewandten Technik gibt es mit dem "display: table". Hier ist ein Artikel für eine detaillierte Ansicht der Ansatz http://css-tricks.com/centering-in-the-unknown/

    Unterstützten Browsern können hier eingesehen werden: http://caniuse.com/#search=table-cell

    HTML: 

    <div class="container">
    <div id="page-login">
        <div class="panel">Some content</div>
    </div>
</div>

    CSS:

    html, body {
    min-height:100%;
    height:100%;
}

.container {
    display: table;
    height:100%;
    width:100%;
    background:#303030;
}

#page-login {
    display: table-cell;
    vertical-align: middle
}

.panel {
    height: 100px;
    background-color: #fff;
}
    scheint, wir hatten die gleiche Idee
    Ja. Ich bevorzuge diese Art der Zentrierung, sondern als der immer noch "neuen" flexbox.

    InformationsquelleAutor elad.chen

  2. 2

    Müssen Sie eine Höhe für die div. Sie haben nur angegeben, eine minimale Höhe, IE automatisch erweitert es, um die max möglich. So fügen Sie eine Höhe, wie diese:

    .page_login > div {
     margin:auto;
     background:#fff;
     min-height:100px;
     width:200px;
     height:200px;
}

    http://jsfiddle.net/e2yuqtdt/6/

    Als dies ist ein flex-box, und daher gemeint, flex, eine gute Idee sein könnte, um die Höhe eines Prozentsatzes. Also die div-Höhe wäre - zum Beispiel - 50% der Seitenhöhe, es sei denn, die Seite wurde weniger als 200px hoch - dann wäre 100px hoch.

    Update: Leider ist es nicht möglich, dass die div-füllen die ganze Seite nur mit CSS. Doch wie es scheint ist es möglich mit Javascript finden Sie hier Machen Sie ein div-füllen Sie die Höhe des verbleibenden Platz auf dem Bildschirm

    Eigentlich - haben dies mit Tabellen divs

    http://jsfiddle.net/e2yuqtdt/14/

    <div>
    <div id="div1">
        <div id="div2">vertical-align:center; text-align:center</div>
    </div>
</div>


#div1 {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

#div2 {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}

    Ich weiß, das update kommt nach der einen von elad.chen - aber hatte dies bereits getan und veröffentlicht es in dem Kommentar unten - hatte noch nicht herumgesprochen zu aktualisieren, die Frage zu stellen.

    Ein neues problem.. Wenn das element zentriert ist höher als Ansichtsfenster-hintergrund ist nur 100% und nicht 100% - scroll-Höhe.. hab aktualisiert, Frage mit neuen Geige
    siehe meine Antwort
    überprüfen Sie erneut
    ja.. möchte aber, es zu tun die "richtige" Art und Weise ohne Tabellen.. wenn Sie Tabellen verwenden, Sie könnten das layout mit Tabellen allein - ohne flexbox 🙂
    Das ist besser! 😀 aber Sie brauchen nicht einmal das styling auf den äußeren div.. schau hier jsfiddle.net/e2yuqtdt/14

    InformationsquelleAutor CalvT

Schreibe einen Kommentar