Crea sito

Allineamento testo elemento HTML

 

Q uando inseriamo un elemento o un testo mediante codice HTML in una qualunque are di un sito o un blog, sia come elemento sia come widget, ci ritroviamo spesso col problema dell’allineamento. Avvolte l’elemento prende l’allineamento di default e si posiziona a sinistra, mentre in altre occasioni si posiziona centralmente quando magari non lo desideriamo.

Avere il controllo sull’allineamento è di fondamentale importanza in tutto il sito. E’ da esso che dipende l’estetica e la funzionalità della pagina, ma soprattutto, una pagina ben curata e formattata garantisce un immagine di serietà e professionalità.

Se vi siete posti questo problema è perché già state operando con codici HTML, ne avete quindi almeno una conoscenza di utilizzo base, anche se magari a livello scrivere autonomamente un codice. Sarà quindi per voi sufficientemente facile il passo successivo che vi porta al controllo dell’allineamento.

Vediamo quindi come fare:

Iniziamo col dire che esistono tre tipi di allineamento

  • A sinistra – “left”
  • Centrato – “center”
  • A destra – “right”

Tutti e tre potranno essere impostati mediante la medesima stringa di comando semplicemente sostituendovi all’interno la specifica di posizione.

Il comando che ci interessa è align (allineamento). Potete vederne un’applicazione pratica qui sotto.

<p align=”center”>CODICE HTML ORIGINALE</p>   oppure   <div align=”center”>CODICE HTML ORIGINALE</div>

Dovrete quindi semplicemente limitarvi ad aggiungere all’inizio e alla fine del vostro codice rispettivamente le scritture <p align=”center”> e </p> oppure <div align=”center”> e </div>. La scelta tra le due dipende da come è formattato il vostro elemento, vi suggerisco quindi di provare entrambe le forme e verificare quale delle due funziona per voi.

Ovviamente nel precedente caso il nostro elemento acquisterà un allineamento centrato, di seguito troverete esempi di allineamento a destra e a sinistra. Per semplicità tratteremo l’elemento con una singola forma di codice.

<p align=”left”>CODICE HTML ORIGINALE</p>

<p align=”right”>CODICE HTML ORIGINALE</p>

Proviamo con un esempio pratico…

Il widget Newsletter che potete vedere nella barra laterale qui a destra è stato inserito tramite stringa HTML come elemento testo.

newsletter

Il codice originale era il seguente:

 <script type=”text/javascript”> var av_nl_lang = ‘it’; </script>
<script type=”text/javascript” src=”http://tl.altervista.org/js/newsletter.js”></script>

Il suo allineamento di default sarebbe a sinistra (molto anti estetico all’interno della sidebar laterale), ho quindi provveduto a correggerlo posizionandolo in posizione centrale (più gradevole). La stringa di codice completa è cosi diventata la seguente:

<div align=”center”>

<script type=”text/javascript”> var av_nl_lang = ‘it’; </script>

<script type=”text/javascript” src=”http://tl.altervista.org/js/newsletter.js”></script>

</div>

ATTENZIONE!!! La visualizzazione del codice per esteso o a righe (cioè con gli invii) non modifica il comportamento del codice. La forma non lineare risulta semplicemente più gestibile con un numero di comandi elevanti. La seguente scrittura è quindi equivalente alla precedente.

<div align=”center”><script type=”text/javascript”> var av_nl_lang = ‘it’; </script><script type=”text/javascript” src=”http://tl.altervista.org/js/newsletter.js”></script></div>

Regola altezza e larghezza di un elemento

Centrare un elemento HTML

ilwebgratis
Il tuo tecnico a portata di click...

Comments are closed.

Come creare un account e-mail Yahoo

yahoo mail logo
 

  Se state cercando un servizio di posta elettronica affidabile e che vi fornisca spazio di archiviazione praticamente illimitato, Yahoo […]

Impostare l’esecuzione automatica di un programma come amministratore

Conferma esecuzione automatica
 

  Vuoi consentire a questa app con autore sconosciuto di apportare modifiche al tuo dispositivo? Vi sarà certamente capitato, di […]

Disabilitare aggiornamento automatico di Windows

 

  Vi sarà certamente capitato di trovarvi a dover spegnere in fretta e furia il computer, magari perché in ritardo […]

Roaming estero, quanto spendo fuori dall’Italia?

Roaming estero
 

  Se state programmando un viaggio all’estero, uno degli interrogativi che vi sarete sicuramente posti è: “Posso usare normalmente il […]

Prime Video, un servizio esclusivo per i clienti Amazon prime

amazon prime video
 

  Avrete certamente già sentito parlare di servizi on-demand. Probabilmente ne avrete già provati anche diversi; Tutti ormai conoscono per esempio […]

Tinder, come scoprire la tua anima gemella

 

  Tinder è una piattaforma di incontri molto diffusa e soprattutto gratuita, disponibile sia in versione web, sia mobile per […]