Probabilmente avete notato che la maggior parte dei paragrafi HTML non hanno un rientro iniziale. Puoi usare marginopadding per spingere i paragrafi a destra, ma ciò influenza l’intero paragrafo, non solo la prima riga. Inoltre, il testo è sempre allineato a sinistra. Come facciamo il testo centrato o il testo allineato a destra?
Come abbiamo visto nella sezione “Bordi”, il modello box controlla l’area attorno al testo. Questa sezione mostra come spostare il testo all’interno della casella stessa.,
Rientro del testo
Per indentare il testo, utilizzare la proprietàtext-indent. Il seguente frammento CSS aggiunge un rientro em 2.0 a tutti i paragrafi:
Se si immette un valore negativo pertext-indent, la prima riga del testo si sposterà a sinistra. Questo è utile per creare “rientri appesi” per intestazioni e simili. L’unico trucco è che è necessario impostare il padding del blocco contenente di conseguenza.
Il “contenitore” div ha un padding uniforme di 5px tutto intorno, ad eccezione del padding sinistro, che è 30px., L’elementoh2 ha il rientro del testo impostato su negativo 25px. Il risultato è che h2sposta 30px a destra a causa del padding, quindi sposta 25px a sinistra a causa del negativotext-indent. Tutti gli altri elementi sono 30px dal bordo sinistro. Il risultato è un rientro sospeso 25px.
Allineamento orizzontale
La proprietà text-align consente di allineare il testo a destra, a sinistra o al centro all’interno del blocco contenente., Le quattro opzioni sono:
-
left: Allinea il testo lungo il bordo sinistro della scatola, lasciando un bordo irregolare a destra. Questo è il valore predefinito. -
center: Centra il testo all’interno della casella. -
right: allinea il testo lungo il bordo destro della casella, lasciando un bordo irregolare a sinistra. -
justify: Allinea il testo lungo i bordi destro e sinistro della casella. Ciò può causare la spaziatura delle parole nella linea a diventare irregolare., L’opzionejustifynon è altrettanto supportata in alcuni browser meno recenti.
Diamo un’occhiata a tutte e quattro le opzioni:
Tieni presente che text-align allinea il testo e altri contenuti in linea all’interno delle caselle. Non influisce sui blocchi stessi. Ad esempio, non è possibile utilizzare text-align: center per centrare una casella più piccola all’interno di una casella più grande. Questo genere di cose fa parte di un concetto più avanzato chiamato posizionamento CSS.
