CSS Allineamento (Allineamento degli elementi)

CSS ha diversi attributi utilizzabili per allineare gli elementi web.

Allineamento del testo

Può essere impostato correttamenteAllineamento del testoper allineareBloccanteTesto all'interno dell'elemento.

h1 {
　　　　text-align: center;
}
p {
　　　　text-align: left;
}

VedereCSS TestoTutorial, per ulteriori informazioni sul formato del testo.

Allineamento centrale utilizzando l'attributo margin

BloccanteL'allineamento centrale dell'elemento è uno dei significati più importanti dell'attributo margin in CSS. Ad esempio, impostando i margini laterali su auto, è possibile allineare in modo orizzontale il contenitore <div>.

div {
　　　　width: 50%;
　　　　margin: 0 auto;
}

Le regole di stile nell'esempio sopra allineano gli elementi in modo orizzontale.

Allineamento degli elementi utilizzando l'attributo position

CSS positionUtilizzando left in combinazione con top, bottom e right, è possibile allineare un elemento rispetto al viewport del documento o al contenitore genitore.

.up {
　　　　position: absolute;
　　　　top: 0;
}
.down {
　　　　position: absolute;
　　　　bottom: 0;
}

Per ulteriori informazioni sui elementi posizionati, vedereCSS PosizionamentoTutorial.

Allineamento a sinistra e destra utilizzando l'attributo float

CSSfloatL'attributo può essere utilizzato per allineare gli elementi del blocco contenitore a sinistra o destra in questo modo, il contenuto altro può scorre lungo i suoi lati.

Quindi, se un elemento fluttua a sinistra, il contenuto scorre lungo il suo lato destro. Al contrario, se un elemento fluttua a destra, il contenuto scorre lungo il suo lato sinistro.

div {
　　　　width: 200px;
　　　　flottare:　sinistro;
}

Cancella il flusso

Una delle cose più confuse quando si utilizza un layout basato su flusso è il padre compresso. L'elemento padre non si allarga automaticamente per accogliere l'elemento flottante. Tuttavia, se il padre non contiene alcun sfondo o bordo visibile, questo non è sempre chiaro, ma è importante notarlo e trattarlo per prevenire layout strani e problemi di cross-browser, questo è molto importante. Vedi l'immagine seguente:

Vedrai

L'elemento non si allarga automaticamente per accogliere l'immagine flottante. Puoi risolvere questo problema cancellando il flusso dopo l'elemento flottante nel contenitore ma prima del tag di chiusura dell'elemento contenitore.

Correggi il padre compresso

Ci sono diversi modi per risolvere il problema del padre compresso di CSS. La prossima sezione ti presenterà queste soluzioni e esempi in tempo reale.

Soluzione 1: flottare il contenitore

Il metodo più semplice per risolvere questo problema è flottare l'elemento padre contenitore.

.container　{
　　　　flottare:　sinistro;
　　　　sfondo:　#f2f2f2;
}

Soluzione 2: utilizzare Div vuoto

Questo è un metodo vecchio ma una soluzione semplice che può essere utilizzata in tutti i browser.

.clearfix　{
　　　　clear:　entrambi;
}
/*　codice snippet html　*/

Puoi anche farlo tramite tag. Ma non è consigliabile utilizzare questo metodo, poiché aggiungerà codice non semantico nel markup.

Soluzione 3: utilizzare l'elemento pseudo :after

Il :after Elemento pseudoCon l'unionecontenutoLa proprietà è stata utilizzata abbastanza ampiamente per risolvere i problemi di flottamento.

.clearfix:after　{
　　　　contenuto:　".";
　　　　display:　blocco;
　　　　altezza:　0;
　　　　clear:　entrambi;
　　　　visibility:　nascosto;
}

La classe .clearfix è applicabile a qualsiasi contenitore con figli flottanti.