Allineare Div al centro dello schermo - Croce Metodo Browser

Allineamento div al centro dello schermo è semplice. È possibile allineare verticalmente ed orizzontalmente mezzo centrare allineare un elemento div con l'aiuto di regole CSS.

A+ A-

Recentemente uno dei lettori TechWelkin commentato che l'allineamento elementi DIV è troppo di un problema e l'utilizzo dell'elemento TABLE è molto meglio. Se si vuole mettere due pezzi di testo side-by-side, è più facile a che fare con la tabella. Ebbene, i nuovi sviluppatori si sentono sempre in quel modo! Ma come si acquisiscono più esperienza e imparare cose nuove, si rendono conto che gli elementi DIV sono altamente flessibili e abbastanza facile da usare. Principianti spesso chiedono, "come allineare e galleggiare un elemento DIV proprio nel centro dello schermo?". Questo problema ha tre parti:

  1. Allineare div elemento al centro orizzontalmente
  2. Poi allineare div elemento a metà in senso verticale
  3. Infine galleggiare div, in modo che rimanga al centro dello schermo quando l'utente scorre schermo.

Tale disposizione è spesso necessario quando si desidera visualizzare un DIV "finestra di messaggio". Le finestre di messaggio sulle pagine web sono tradizionalmente indicati nel mezzo dello schermo per ottenere la massima attenzione da parte del visitatore. Impariamo ad allineare un DIV al centro dello schermo del browser. Cominciamo con cosa più semplice:

Orizzontalmente Centro Allinea un DIV

Questo è il più semplice. Tutto quello che dovete fare è impostare i margini destro e sinistro come auto. Browser in grado di rilevare questa proprietà CSS e fare automaticamente l'allineamento orizzontale. Per esempio:

 # My-div {
margin: 0 auto;
width: 400px;
}

Prendere nota che si avrebbe bisogno di dare una larghezza definita per l'elemento div perché senza larghezza specificata, div elemento occupa l'intera larghezza dello schermo. Di conseguenza, senza larghezza specificata, non sarebbe in grado di notare l'allineamento centrale.

Verticalmente Medio Allinea un DIV sullo schermo

Questa è una cosa difficile po '. Ci sono diverse opzioni disponibili per fare l'allineamento verticale metà del div elemento -ma il migliore e cross-browser soluzione è menzionato da Billbad su StackOverflow :

HTML

<div class="outer">
<div class="middle">
<div class="inner">Content</div>
</div>
</div>

regole CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}
TechWelkin.com pubblica anche Web Development punte e tutorial.

TechWelkin.com pubblica anche Web Development punte e tutorial.

Le regole CSS qui sopra funziona in tutti i principali browser, tranne, naturalmente, le versioni precedenti di Internet Explorer. Come tutti sappiamo, Internet Explorer ha le sue regole! Così, purtroppo, dobbiamo definire diversi set di proprietà per IE. Dovrete aggiungere condizionalmente un file CSS separato che conterrà le regole da seguire per IE.

CONDIZIONATAMENTE CONTENERE STYLESHEET

<!--[if lte IE 7]><link href="style-ie.css" rel="stylesheet" /><![endif]-->;

CSS per IE

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}
Spiegazione: Come fa div viene allineato al centro?

La chiave del metodo di cui sopra sono le regole CSS del div centrale. Molti di voi avranno provato proprietà vertical-align per allineare verticalmente un div. Ma la maggior parte di voi non sarebbe successo! La ragione è che questa struttura funziona su celle di tabella e non su un elemento div con visualizzazione del blocco. La visualizzazione predefinita di un div è a blocchi, in modo che quando si crea un div e tenta di vertical-align per -E mezzo non funzionerà. Si sarebbe prima necessario impostare la proprietà visualizzazione del div di table-cell.

Il div esterno in soluzione di cui sopra svolge anche un ruolo importante. Esso occupa l'intera area browser con larghezza e altezza impostato a 100%. Il div esterno crea un parco giochi per i div mezzo così come il div mezzo ha l'intero schermo a se stesso e si può spostare ovunque senza alcun altro elemento proveniente a suo modo. La proprietà position assicura che il div esterno galleggia quando utente scorre sullo schermo.

L'effetto combinato di div esterno e medio è che in senso verticale centro allineare il div interno. Poi il div interno orizzontale centrare allinearsi; rendendo l'interno destro visibile div al centro dello schermo.

Spero che risposto alla tua domanda. Non esitate a fare domande. Grazie per aver usato TechWelkin!

Ads

Condividere