Qualsiasi testo può essere allineato a sinistra, al centro o a destra in una pagina Web. Le immagini possono anche essere allineate su una pagina Web allo stesso modo del testo. Di seguito sono riportati esempi di come allineare testo e immagini a sinistra, scheda, centro e allineamento a destra.
Esempi di allineamento
Allineato a sinistra
Scheda allineata
Allineato al Centro
Allineato a destra
Esempio allineato a sinistra
Per impostazione predefinita, l'inglese e altre lingue allineano il testo a sinistra. Tuttavia, se è necessario modificare l'allineamento dell'elemento, è possibile aggiungere il codice seguente all'elemento o nel CSS.
Codice HTML
<p style = "text-align: left;"> Allineato a sinistra </p>
<p style = "text-align: left;"> <img src = "example.jpg"> </p>
Esempio di tab allineato
Sebbene non sia presente un allineamento del testo a "tab", è possibile aggiungere un margine sinistro a un elemento per l'aspetto di un allineamento a tab, come mostrato di seguito.
Codice HTML
<p style = "margin-left: 2.5em;"> Scheda allineata </p>
<p style = "margin-left: 2.5em;"> <img src = "example.jpg"> </p>
Esempio allineato al centro
Utilizzando l'attributo text-align, puoi centrare qualsiasi testo o immagine in un elemento, come mostrato nell'esempio seguente.
Codice HTML
<p style = "text-align: center;"> Allineato al centro </p>
<p style = "text-align: center;"> <img src = "example.jpg"> </p>
Esempio allineato a destra
Utilizzando l'attributo text-align, puoi centrare qualsiasi testo o immagine in un elemento, come mostrato nell'esempio seguente.
Codice HTML
<p style = "text-align: right;"> Allineato a destra </p>
<p style = "text-align: right;"> <img src = "example.jpg"> </p>
Suggerimenti di allineamento aggiuntivi
Di seguito sono riportati ulteriori suggerimenti di allineamento che possono essere applicati a qualsiasi delle regole di stile sopra o ad altre classi CSS.
- È possibile aggiungere un margine aggiuntivo a uno degli stili sopra indicati se è necessario un rientro aggiuntivo o si desidera un maggiore riempimento. Ad esempio, è possibile applicare un margine destro all'esempio allineato a destra per spostare ulteriormente il testo nell'elemento.
- Se si desidera una pagina più reattiva, assicurarsi di regolare o rimuovere qualsiasi giustificazione sinistra o destra quando visualizzato su uno schermo più piccolo.