La disposizione dei contenuti che appare su un sito Web è molto significativa quando si tratta di rendere il tuo sito Web squisitamente piacevole e migliorare la sua esperienza utente. Il contenuto può essere un elemento HTML (livello in linea o a blocchi), un po 'di testo, un'immagine, ecc. Ci sono vari approcci disponibili in CSS per allineare questi tipi di contenuti sulla tua pagina web. In questo post, discuteremo alcuni di questi approcci per chiarire il concetto di allineamento dei contenuti.

Cominciamo

Allinea elementi a livello di blocco

Vi è un'enorme quantità di elementi che rientrano nella categoria di elementi a livello di blocco come

,

A

, , eccetera. Puoi allineare questi elementi in modi diversi. Ne abbiamo discussi alcuni qui per te.

Come allineare il testo in CSS

Puoi allineare il testo usando il CSS allineamento proprietà. Questa proprietà rende diversi valori come sinistra, destra, centro e giustifica.

Esempio

Supponiamo di voler allineare un po 'di testo presente all'interno di un contenitore Div a destra. Segui il codice qui sotto.

Html

Questo testo è giusto allineato.

Abbiamo messo a

elemento all'interno di un elemento e assegnato una classe "a destra" all'elemento.

CSS

.Giusto
Testo-align: giusto;
bordo: 3px viola solido;

Utilizzando la proprietà allineata dal testo stiamo allineando il testo al lato destro del contenitore div.

Produzione

Il testo è stato allineato a destra usando la proprietà allineata.

Allineare elementi in linea

Arriva del tempo in cui dobbiamo allineare elementi in linea come le immagini. È possibile allineare questi tipi di elementi modificando il loro tipo di elemento in bloccare il livello utilizzando la proprietà di visualizzazione di CSS e quindi allinearlo varie proprietà CSS in base alla necessità.

Allinea un'immagine

Usando varie proprietà CSS come Schermo, margine-sinistra, O margine-destra, Puoi allineare un'immagine in qualunque stile ti piaccia.

Esempio

Supponiamo di voler allineare un'immagine in orizzontale a parte se si trova in un contenitore o no.

Html

Qui abbiamo inserito un'immagine usando il tag.

CSS

img
blocco di visualizzazione;
Margin-Left: Auto;
margine-destra: auto;
larghezza: 50%;

Per allineare un'immagine in orizzontale, impostare il display su bloccare ed entrambi i margini (a sinistra e a destra) su Auto. Inoltre, puoi fornire un po 'di larghezza o altezza a tua scelta.

Produzione

L'immagine è stata allineata al centro con successo.

Allineamento orizzontale

Esploriamo diversi approcci che possono essere utilizzati per allineare gli elementi a livello di blocco in orizzontale.

Come centrare allineare un elemento

Supponiamo che tu abbia un e vuoi che prenda solo una quantità specifica di spazio invece di occupare l'intero spazio orizzontale e allinearlo al centro della pagina. Ecco come lo fai.

Html

Allineare il contenuto in CSS

Qui, abbiamo creato un elemento e nidificato a

elemento in esso.

CSS

.Centro
imbottitura: 5px;
Margine: auto;
larghezza: 70%;
bordo: 3px viola solido;

Ora per l'elemento Div occupare solo lo spazio specificato in modo che non si estenda agli angoli del suo contenitore, gli dà un po 'di larghezza. Per allinearlo in orizzontale, impostare il margine su Auto.

Produzione

Il Div è stato allineato al centro con successo.

Come allineare gli elementi usando la proprietà di posizione

In questo esempio, allineeremo un contenitore Div a destra usando il valore assoluto della proprietà di posizione.

Html

Allineare elementi utilizzando la proprietà di posizione CSS

Questo div è allineato a destra usando il valore aboslutato della proprietà di posizione CSS.

Qui abbiamo creato due contenitori div per comprendere il funzionamento del valore assoluto della proprietà di posizione. La classe "Div" è assegnata al primo tag DIV e la classe "Green" è assegnata al secondo tag DIV.

CSS

.div
imbottitura: 15px;
Bordo: 3px Black solido;

.verde
Posizione: assoluto;
a destra: 1%;
Top: 15%;
larghezza: 300px;
bordo: 3px verde solido;
imbottitura: 10px;

Entrambi i contenitori di Div sono stati forniti uno stile, tuttavia, la proprietà di Second Div è stata impostata su Absolute. Ora il Secondo div sarà allineato rispetto alla posizione del Primo Div.

Produzione

Il div "verde" è stato assolutamente posizionato rispetto al primo div usando la proprietà della posizione CSS.

Come allineare gli elementi usando la proprietà float.

Supponiamo di voler galleggiare un contenitore di div sul lato destro della pagina.

Html

Ciao mondo!

Nel codice sopra, abbiamo creato un contenitore di div e nidificato a

elemento in esso.

CSS

.Giusto
Float: giusto;
larghezza: 300px;
bordo: 3px viola solido;
imbottitura: 5px;

Usando la proprietà float stiamo fluttuando l'intero div e il contenuto al suo interno a destra.

Produzione

Il contenitore Div è stato galleggiato a destra con successo.

Allineamento verticale

Qui abbiamo spiegato alcuni modi che puoi usare per allineare gli elementi in verticale.

Come allineare gli elementi in verticale usando l'imbottitura

Supponiamo di voler centrare verticalmente un testo presente all'interno di un contenitore.

Html

Questo paragrafo è centrato in verticale.

Qui abbiamo creato un elemento div e nidificato a

elemento al suo interno.

CSS

.Centro
imbottitura: 80px 0;
bordo: 3px viola solido;

Nel codice CSS sopra, stiamo dando l'imbottitura di 80px dalla parte superiore e inferiore e 0px da 0px sinistro e destro al

tag al centro allinearlo all'interno del div.

Produzione

Il testo è stato allineato al centro con successo.

Come allineare gli elementi usando la linea di linea

Usando lo stesso esempio di sopra possiamo allineare il testo utilizzando anche la proprietà CSS line-height.

CSS

.Centro
Line-Height: 200px;
bordo: 3px viola solido;
Testo-align: centro;

.Centro P
Height di linea: 1.5;
display: blocco inline;

Basta impostare la linea di linea del contenitore Div su 200px e quindi impostare la linea di linea di

Elemento a 1.5.

Produzione

Gli elementi HTML sono stati allineati verticalmente e orizzontalmente.

Come allineare gli elementi in verticale usando Flexbox

Ancora una volta stiamo prendendo in considerazione lo stesso esempio e usando Flexbox questa volta per allineare verticalmente e orizzontalmente gli elementi.

CSS

.Centro
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;
Altezza: 200px;
bordo: 3px verde solido;

Qui, stiamo impostando il display del contenitore Div come Flex e Centro allineando il contenuto e gli elementi presenti all'interno del contenitore Div utilizzando le proprietà di contenuto e allineate. Inoltre, stiamo anche fornendo un po 'di altezza e confine ad esso.

Produzione

Il testo è allineato al centro (sia in verticale che orizzontalmente) usando Flexbox.

Conclusione

Esistono vari approcci disponibili in CSS per allineare gli elementi HTML come è possibile allinearli verticalmente e orizzontalmente a destra, o sinistra o al centro utilizzando proprietà di posizione, proprietà galleggiante, imbottitura, altezza di linea o Flexbox, ecc. Inoltre puoi utilizzare queste proprietà per allineare il testo e le immagini che appaiono sul tuo sito Web. Abbiamo discusso in dettaglio alcuni approcci diversi lungo esempi adeguati, che sono utili quando si tratta di allineamento del contenuto sulle tue pagine web.