Come Allineare Elementi in HTML

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 di 2:
Allineare il Testo con l'HTML

  1. 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. 2
    Individua quale proprietà utilizzare all'interno del tag "div" per modificare l'allineamento del testo.
  3. 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. 4
    Salva le modifiche.
  5. 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. 6
    Controlla che il testo sia stato allineato nel modo desiderato.
    Pubblicità

Metodo 2 di 2:
Allineare le Immagini con l'HTML

  1. 1
    Trova il codice HTML dell'immagine che desideri allineare.
  2. 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. 3
    Salva il tuo codice.
  4. 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.
Pubblicità

Informazioni su questo wikiHow

wikiHow è una "wiki"; questo significa che molti dei nostri articoli sono il risultato della collaborazione di più autori. Per creare questo articolo, 9 persone, alcune in forma anonima, hanno collaborato apportando nel tempo delle modifiche per migliorarlo.
Categorie: Programmazione

Hai trovato utile questo articolo?

No
Pubblicità