Come centrare allineare il testo nella tua pagina Web con CSS
Se sei nuovo nello sviluppo front-end, la disparità tra ciò che un semplice documento HTML produce nel tuo browser e la realtà di come appare un sito Web moderno può sembrare molto scoraggiante.
Una delle prime cose che potresti notare è che tutto il tuo testo HTML è allineato a sinistra della tua pagina web per impostazione predefinita. Sebbene non esista un metodo pratico per allineare al centro il testo in HTML, esiste una proprietà CSS che può farlo facilmente.
In questo articolo del tutorial imparerai come centrare il testo allineato sulle pagine web usando i CSS.
Che cos’è la proprietà di allineamento del testo CSS?
La proprietà CSS text-align è una funzionalità CSS utilizzata per organizzare il testo in una pagina web. A questa proprietà può essere assegnato uno dei diversi valori a seconda del layout che si desidera ottenere sulla pagina web. Alla proprietà CSS text-align vengono spesso assegnati i seguenti valori.
- Sinistra (allinea il testo a sinistra di una pagina Web ed è anche l’allineamento predefinito)
- Destra (allinea il testo a destra di una pagina web)
- Centro (allinea il testo al centro di una pagina web)
- Giustifica (assicura che ogni riga di testo abbia la stessa larghezza)
Allineamento al centro del testo su una pagina Web
Dato che la maggior parte delle lingue viene letta da sinistra a destra, l’allineamento del testo a sinistra di una pagina Web per impostazione predefinita è pratico. Tuttavia, ci saranno casi in cui l’allineamento centrale del testo è un approccio più pratico (come titoli e sottotitoli).
Esempio di pagina Web HTML semplice
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Alignment</title>
</head>
<body>
<div class="container">
<div id="box-1">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
<div id="box-2">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
</div>
</body>
</html>
Il file HTML sopra genererà la seguente pagina web nel tuo browser.
Come puoi vedere dall’output sopra, tutto il testo è allineato a sinistra. Esistono diversi metodi che puoi utilizzare per centrare l’allineamento del testo sopra, ma prima devi identificare quale testo vuoi allineare al centro.
Se l’obiettivo è centrare l’allineamento di tutto il testo sulla tua pagina web, il codice seguente lo farà.
Allineamento al centro di tutto il testo Esempio
.container{
text-align: center;
}
Il codice CSS sopra usa una proprietà di classe per indirizzare tutto il testo sulla pagina web, e questo è possibile solo perché c’è un tag genitore <div> con una classe contenitore che racchiude tutto il testo sulla pagina web. Il codice produrrà il seguente output nel tuo browser.
Come puoi vedere, tutto il testo sulla pagina web è ora allineato al centro. L’unico problema è che il paragrafo avrebbe un aspetto migliore e sarebbe più leggibile se fosse allineato a sinistra. Nei casi in cui desideri solo centrare allineare parte del testo su una pagina web, puoi utilizzare elementi HTML come selettori invece di classi e ID.
Esempio di allineamento al centro di testo specifico
h1, h3{
text-align: center;
}
Il codice sopra ha come target solo gli elementi h1 e h3 su una pagina web e produrrà il seguente output nel tuo browser.
Allineamento al centro di un Div su una pagina Web
Un’altra tendenza che potresti notare tra i siti Web moderni è che il testo non arriva fino ai bordi. Questo è uno dei casi in cui viene utilizzato il div padre. Sebbene non ci sia una proprietà div align nei CSS, la proprietà margin può essere utilizzata per allineare al centro un div genitore e il suo contenuto.
Esempio di divisione di allineamento al centro
.container{
max-width: 920px;
margin: auto;
}
Il codice sopra fa diverse cose. Innanzitutto, assegna una larghezza a tutto il contenuto della pagina Web, utilizzando la classe del div genitore. Dovresti sempre utilizzare la proprietà max-width invece della proprietà width quando inserisci il contenuto del sito web in contenitori, poiché ciò facilita la reattività definendo una larghezza massima invece di una larghezza fissa.
Il codice sopra utilizza anche la proprietà margin per posizionare il div genitore al centro della pagina Web, producendo il seguente output nel browser.
Come puoi vedere dall’immagine sopra, la larghezza del testo è stata ridotta a 920px e il contenitore invisibile che racchiude il testo è ora al centro della pagina web grazie alla proprietà margin.
Come funziona la proprietà del margine?
Alla proprietà margin può essere assegnata una combinazione di tre valori diversi. Quando quattro valori vengono assegnati alla proprietà CSS, ogni valore avrà come target uno dei quattro lati di un elemento HTML.
Quando due valori sono assegnati alla proprietà margin, il primo valore avrà come target i lati superiore e inferiore dell’elemento HTML e il secondo valore avrà come target i lati sinistro e destro dell’elemento HTML.
Nell’esempio sopra, alla proprietà margin viene assegnato solo un valore, il che significa che ha come target il lato sinistro e destro dell’elemento HTML (che in questo caso è il tag <div> genitore).
Alla proprietà margin vengono solitamente assegnati valori che sono nell’unità pixel o, come nell’esempio sopra, il valore automatico . Il valore auto garantisce che il margine utilizzato su entrambi i lati dell’elemento HTML sia uguale. Ciò posiziona efficacemente l’elemento div genitore (e per estensione il testo) al centro della pagina Web, fornendo un layout che riflette le pagine Web moderne.
Cosa puoi fare adesso
Questo articolo tutorial ti insegna diverse cose:
- Come usare la proprietà text-align per centrare il testo su una pagina web.
- Come centrare allineare diversi gruppi di testi racchiusi da tag <div> o altri elementi HTML.
- Come centrare un gruppo di testo utilizzando la proprietà margin su un div genitore.
Tuttavia, questa è solo la punta dell’iceberg in quanto riguarda gli strumenti CSS che possono essere utilizzati per organizzare il layout del tuo sito web. Una delle proprietà CSS più popolari che possono essere utilizzate per mappare in particolare il layout strutturale della tua pagina web (incluso il testo allineato al centro) è la griglia CSS.
CSS Grid fornisce una struttura di layout bidimensionale (righe e colonne) per le tue pagine web, con un framework facile da imparare e utilizzare.
