Pubblicato il 03/09/09 - aggiornato il  | 7 commenti :

Come centrare un testo, un’immagine o un video in un articolo o in un elemento di Blogger.

Il sistema per centrare qualsiasi cosa in una sezione di un blog agendo sull’HTML è quello di inserire i due tag <center> e </center> all’inizio e alla fine della “cosa” che vogliamo nel centro del layout. Se è un’immagine si tratterà di un codice di questo tipo

<center><img src=”URL-Immagine”></center>

mentre se è un video, quello che vogliamo centrare in mezzo alla pagina o nella sidebar, il codice da inserire sarà il seguente

<center><object…….                …….</object></center>

dove <object… e …</object> rappresentano l’inizio e la fine del codice copiato p.e su Youtube. Ovviamente per inserire questo codice dobbiamo andare il modalità HTML se stiamo scrivendo un articolo oppure inserire questi tag in un elemento pagina HTML/Javascript.

La cosa funziona egregiamente anche con del testo. Per esempio questo codice

<center><p><font size="3"><strong>Testo centrato con il tag center</strong></font></p>
</center>

genera questa scritta

Testo centrato con il tag center

Questo tag ha però un problema, viene deprecato dal W3C che è l’istituzione che sovrintende al miglioramento dei protocolli. Se si stesse dietro a tutte le raccomandazioni di questo consorzio staremo freschi. Ecco per esempio come dovremmo inserire un oggetto flash secondo i dettami del W3C.

C’è però un’altra considerazione da fare. Il tag center non è supportato dall’XHMTL  che è un linguaggio che associa alcune proprietà dell’XML con le caratteristiche dell’HTML. In altri termini un file XHTML è una pagina HTML che rispetta lo standard XML.

Gli utenti di Blogger forse sapranno che i modelli del loro blog sono compilati proprio in XML.

Quindi se volessimo fare le cose precise, per centrare un oggetto, invece di usare il tag center dovremmo usare quest’altro tipo di codice

<div style="text-align:center;">oggetto da centrare</div>

e questo modo di procedere dà dei risultati sostanzialmente analoghi al precedente. Ecco quindi come dovrebbe essere impostato il codice per centrare video, immagini e testi

<div style="text-align:center;">testo da centrare</div>

<div style="text-align:center;"><img src=”URL-Immagine”></div>

<div style="text-align:center;"><object…           …</object></div>

dove al posto dei dati in rosso si inseriscono testo, immagine e video. Concludendo fate un po’ come vi pare, tanto funzionano tutti e due  Smile.

Aggiornamento: In un commento mi è stato fatto notare che per centrare un oggetto si può utilizzare anche la seguente sintassi

<div align="center">oggetto da centrare</div>

questo sistema funziona perfettamente come gli altri due che ho illustrato. In questo caso non si usano i fogli di stile rappresentati dal tag style quindi sicuramente è meno apprezzato da parte del W3C, anche se questo consorzio invita ad usare certi protocolli non obbliga.



7 commenti :

  1. io ho sempre usato il tag div align="center" e mi ha sempre centrato sia le immagini che i video.. va bene comunque questo tag?

    RispondiElimina
  2. @Michele
    Certo che va bene, è anche più corretto del tag center che però è più corto da inserire manualmente :)

    RispondiElimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. Vorrei ringraziarti per tutto l'aiuto che mi hai dato con i tuoi articoli. Ho risolto molti problemi nel mio blog. Sei veramente un mago. Grazie ancora!!

    RispondiElimina
  5. Ciao, sopra l'header ho inserito un widget (id: HTML3) contenente un file SWF, ma non riesco a centrarlo in nessun modo con i sistemi da te descritti...Devo agire dentro il template, e se sì, come? Grazie!

    RispondiElimina
  6. Prova con questo. Vai nel modello sopra alla riga
    /b:skin
    e incolla questo codice

    #HTML3 {text-align:center;}

    oppure questo

    #HTML3 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    Non ho testato.
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy