Flexbox non centrato verticalmente in IE


116

Ho una semplice pagina web con alcuni contenuti Lipsum centrati sulla pagina. La pagina funziona bene in Chrome e Firefox. Se riduco le dimensioni della finestra, il contenuto riempie la finestra fino a quando non è possibile, quindi aggiunge una barra di scorrimento e riempie il contenuto fuori dallo schermo, verso il basso.

Tuttavia, la pagina non è centrata in IE11. Posso centrare la pagina in IE flettendo il corpo, ma se lo faccio, il contenuto inizia a uscire dallo schermo verso l'alto e taglia la parte superiore del contenuto.

Di seguito sono riportati i due scenari. Vedi i violini associati. Se il problema non è subito evidente, riduci le dimensioni della finestra dei risultati in modo che sia costretta a generare una barra di scorrimento.

Nota: questa applicazione si rivolge solo alle ultime versioni di Firefox, Chrome e IE (IE11), che supportano tutte la raccomandazione del candidato di Flexbox , quindi la compatibilità delle funzionalità non dovrebbe essere un problema (in teoria).

Modifica : quando si utilizza l'API a schermo intero per visualizzare a schermo intero il div esterno, tutti i browser vengono centrati correttamente utilizzando il CSS originale. Tuttavia, uscendo dalla modalità a schermo intero, IE torna ad essere centrato orizzontalmente e allineato verticalmente in alto.

Modifica : IE11 utilizza un'implementazione non specifica del fornitore di Flexbox. Aggiornamenti del layout della scatola flessibile ("Flexbox")


Centra e ridimensiona correttamente in Chrome / FF, non centra ma ridimensiona correttamente in IE11

Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Centra correttamente ovunque, taglia fuori quando viene ridimensionato

Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Al momento non ho accesso a IE11, hai provato questa soluzione: stackoverflow.com/questions/16122341/… ?
cimmanon

margin: auto non sembra aver fatto la differenza.
Dragonseer

Si prega di segnalare bug almeno Microsoft avrà un bug in meno nel rilascio ufficiale, come sempre IE avrà qualcosa (molti bug unici) con cui gestire ..
MarmiK

è necessario utilizzare -ms-flexboxper IE ..
avrahamcool

IE11 utilizza l'attuale standard di visualizzazione Flexbox: flex. msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx . L'ho provato comunque e non ha fatto differenza; il contenuto è ancora allineato in alto. Inoltre, tieni presente la mia modifica nella domanda originale che afferma che il div esterno si centra correttamente quando è a schermo intero ma è allineato in alto quando è fuori a schermo intero.
Dragonseer

Risposte:


225

Ho scoperto che i browser, ad esempio, hanno problemi ad allineare verticalmente i contenitori interni, quando è impostato solo lo stile altezza minima o quando lo stile altezza non è affatto mancante. Quello che ho fatto è stato aggiungere uno stile di altezza con un certo valore e questo ha risolto il problema per me.

per esempio :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

Quindi ora abbiamo lo stile di altezza, ma l'altezza minima lo sovrascriverà. In questo modo cioè è felice e possiamo ancora usare l'altezza minima.

Spero che questo sia utile per qualcuno.


9
Non dimenticare -ms-flex-align:center;per IE10. Il supporto per è align-itemsstato aggiunto solo in IE11 .
Boaz

Ah! così tanti mesi dopo questo mi ha salvato: impostare un'altezza invece di un'altezza minima funzionava.
Pete

@KaloyanStamatov Controlla l' autoprefixer e aiuta a sbarazzarti di questi fastidiosi problemi del browser.
hitautodestruct

29
Questa soluzione non funziona quando il contenuto è maggiore dell'altezza minima. In min-heighteffetti, sovrascrive la heightregola, ma se il contenuto supera min-heightil limite si estenderà semplicemente al di fuori dei limiti. La risposta di @ericodes risolve questo problema e la soluzione funziona su tutti i browser che supportano flex.
lachie_h

2
Per chi viene qui dentro o dopo il 2019, la soluzione migliore è di gran lunga quella di @ sergey-fedirko che non richiede ulteriori elementi HTML e non altezze duri;) Questo uno: stackoverflow.com/a/54796082/134120
AsGoodAsItGets

71

Prova a racchiudere qualsiasi div con cui hai flexbox flex-direction: columnin un contenitore che sia anche flexbox.

L'ho appena testato in IE11 e funziona. Una soluzione strana, ma fino a quando Microsoft non rende esterna la correzione dei bug interni ... dovrà fare!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

2 esempi da testare in IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/


1
Dovresti pubblicare il codice che hai usato per risolvere il problema nella tua risposta effettiva, piuttosto che collegarti a un URL esterno. Quindi la tua risposta continuerà ad essere utile, anche dopo la morte del collegamento.
Kelly Keller-Heikkila

11
Questa è di gran lunga la migliore soluzione a questo bug. Tutte le altre risposte suggeriscono un'altezza fissa sul contenitore, che non funziona se il contenuto è di altezza variabile. Questa soluzione consente l'utilizzo di min-heightinvece di una heightregola rigida , pur essendo centrata verticalmente su tutti i browser che ne supportano l'utilizzo display: flex.
lachie_h

1
Basta display:flexche serve sulla confezione, e forse uno dei due di questi sul bambino:width: 100% flex-basis:100% flex-grow:1 a seconda del contenuto / stile.
fregante

questa soluzione alternativa non funziona se la proprietà FlexContainerWrapper align-items è impostata la . Devi avvolgere il flexbox originale con un flexbox senza questa proprietà.
Marcus Krahl

hey @MarcusKrahl! stai dicendo avvolgere il flexbox originale (FlexContainer) con un flexbox senza una align-itemsproprietà (FlexContainerWrapper)?
ericode

10

Ecco la mia soluzione di lavoro (SCSS):

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

6

Nel caso in cui qualcuno arrivi qui con lo stesso problema che ho avuto, che non è stato affrontato specificamente nei commenti precedenti.

Avevo margin: autol'elemento interno che lo faceva aderire alla parte inferiore del suo genitore (o l'elemento esterno). Ciò che lo ha risolto per me è stato cambiare il margine in margin: 0 auto;.


5

43
A quanto pare, però, non è stato risolto esternamente.
Blazemonger

4
"Questo problema sembra essere stato risolto in Microsoft Edge. Al momento non stiamo lavorando su bug di funzionalità in Internet Explorer al di fuori dei problemi di sicurezza". Hanno chiuso il problema per le versioni di IE pre-Edge
David Zulaica

1
La soluzione sembra essere quella di usare l'altezza anziché l'altezza minima, se puoi.
frodo2975


3

ho aggiornato entrambi i violini. spero che faccia il tuo lavoro.

centraggio

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

centro e scorrere

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }

Grazie per il tuo contributo. Sfortunatamente, i tuoi violini non sembrano funzionare in Chrome o IE11. L'esempio di centratura non è più centrato in Chrome e l'esempio di centratura e scorrimento non è centrato in IE11 e continua a tagliare il contenuto.
Dragonseer

1

Non ho molta esperienza con Flexboxma mi sembra che l'altezza forzata su htmlebody tag faccia sì che il testo scompaia in alto quando viene ridimensionato - Non sono stato in grado di testare in IE ma ho trovato lo stesso effetto in Chrome.

Ho biforcato il tuo violino e ho rimosso le dichiarazioni heighte width.

body
{
    margin: 0;
}

Sembrava anche che le fleximpostazioni dovessero essere applicate ad altri flexelementi. Tuttavia, l'applicazione display: flexper i .innerproblemi causati così ho impostato in modo esplicito il .innerper display: blocke impostare la .outeraflex per il posizionamento.

Ho impostato l' .outeraltezza minima per riempire il viewport, il display: flexe ho impostato l' allineamento orizzontale e verticale:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

Ho impostato .innera display: blockmodo esplicito. In Chrome, sembrava ereditato flexda .outer. Ho anche impostato la larghezza:

.inner
{
    display:block;
    width: 80%;
}

Questo ha risolto il problema in Chrome, si spera che potrebbe fare lo stesso in IE11. Ecco la mia versione del violino: http://jsfiddle.net/ToddT/5CxAy/21/


Grazie per la tua risposta. La dichiarazione di altezza e larghezza è necessaria per centrare verticalmente in IE. Senza di esso, il contenuto non è più centrato in IE11.
Dragonseer

Anche con l'altezza impostata sul div esterno? Forse aggiungi un'altezza minima al corpo?
Todd

1

Ho trovato una buona soluzione cosa ha funzionato per me, controlla questo link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Innanzitutto, aggiungiamo un div genitore, secondo cambiamo min-height: 100% in min- altezza: 100VH. Esso funziona magicamente.

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  

0

Se puoi definire la larghezza e l'altezza del genitore, c'è un modo più semplice per centralizzare l'immagine senza dover creare un contenitore per essa.

Per qualche motivo, se definisci la larghezza minima, IE riconoscerà anche la larghezza massima.

Questa soluzione funziona per IE10 +, Firefox e Chrome.

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.