Come Allineare Elementi in HTML

Info sull'Autore

Codificare e allineare correttamente elementi in HTML richiede l'uso del linguaggio CSS, ma non tutti i siti web consentono di personalizzare i fogli di stile per allineare correttamente le sezioni della tua pagina web. Scopri come allineare un elemento in HTML in modo che appaia nel modo che desideri, anche quando non è possibile aggiungere al sito un nuovo foglio di stile. Questa tecnica è chiamata "inline" CSS.

Metodo 1

Metodo 1 di 2:

Allineare il Testo con l'HTML

1
Aggiungi il tag "div" ad ogni sezione a cui intendi cambiare l'allineamento. Ciò significa che dovrai aggiungere il tag "div" all'interno dei simboli "maggiore" e "minore" (<>) davanti al primo tag HTML, e aggiungere "/div" all'interno degli stessi simboli (<>) davanti all'ultimo tag HTML della sezione a cui intendi cambiare allineamento.
2
Individua quale proprietà utilizzare all'interno del tag "div" per modificare l'allineamento del testo.
3
Se vuoi allineare il testo a sinistra, modifica il tag "div" inserendo il seguente testo all'interno dei simboli "<>": div style = 'text-align: left'.
- Se vuoi allineare il testo a destra, modifica il tag "div" inserendo il seguente testo all'interno dei simboli "<>": div style = 'text-align: right'.
- Se vuoi allineare il testo al centro, modifica il tag "div" inserendo il seguente testo all'interno dei simboli "<>": div style = 'text-align: center'.
- Se vuoi giustificare il testo, modifica il tag "div" inserendo il seguente testo all'interno dei simboli "<>": div style = 'text-align: justify'.
4
Salva le modifiche.
5
Verifica l'aspetto del tuo contenuto per assicurarti che le modifiche siano state applicate.
- Se non sono state applicate, vuol dire che il sito web adotta un codice specifico che invalida i tag "div" nel foglio di stile. Esegui l'override del foglio di stile aggiungendo la versione appropriata di "style = 'text-align: right'" all'interno del tag di apertura di ogni elemento per modificarne l'allineamento. Ad esempio, un tag "p" verrebbe modificato con "p style = 'text-align: right'" all'interno dei simboli "<>".
6
Controlla che il testo sia stato allineato nel modo desiderato.

Pubblicità

Metodo 2

Metodo 2 di 2:

Allineare le Immagini con l'HTML

1
Trova il codice HTML dell'immagine che desideri allineare.
2
Modifica il tag "img" aggiungendo la proprietà "float".
- Se vuoi che l'immagine venga allineata a sinistra, aggiungi all'interno dei simboli "<>" del tag: style='float:left', come in "img style='float:right'".
- Se vuoi che l'immagine venga allineata a destra, aggiungi all'interno dei simboli "<>" del tag: style='float:right', come in "img style='float:right'".
- Se vuoi allineare l'immagine al centro, il codice diventa un po' più complicato. Non esiste la proprietà "float: center", dovrai quindi aggiungere, sempre all'interno dei simboli "<>": style='align:center;text-align:center', come in "img style='align:center;text-align:center'".
3
Salva il tuo codice.
4
Controlla che le tue immagini siano ben allineate.

Pubblicità

Consigli

Forse avrai notato l'uso della proprietà "p align = 'center'" (all'interno dei simboli "<>") per modificare l'allineamento del testo. Cerca di evitarla, in quanto è ormai obsoleta, ed è solo una questione di tempo prima che i principali browser ne sospendano l'uso.
Le istruzioni su come allineare le immagini con l'HTML ti permettono anche di allineare le sezioni con l'HTML. Aggiungi il tag "div" all'inizio e alla fine delle sezioni, come spiegato nei passaggi precedenti. Puoi aggiungere la proprietà "float" nel tag "div", allo stesso modo delle tag "img" per allineare le immagini.
Se il codice non viene visualizzato correttamente, è probabile che il sito adotti un filtro per invalidare simili tag nel codice HTML. Tuttavia, è anche possibile che manchino degli elementi come un punto e virgola, una parentesi, o delle virgolette all'interno del codice, impedendo così al codice di funzionare correttamente. Verifica che tali elementi siano inclusi, soprattutto se parti del codice sembrano funzionare e altre no.