Quando 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.

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