Come centrare una immagine o un testo orizzontalmente coi CSS

Supponiamo che abbiamo un compito di centrare una immagine con la sua descrizione che la segue. Oggi vediamo i metodi diciamo piu tradizionali e lasciamo fuori discussone almeno per oggi i cosi detti flexbox. Vorrei anche sottolineare che nel nostro corso gratuito dedicato al linguaggio CSS abbiamo  affrontato questo argomento. Guarda il  avideo in fondo.

Ogni webmaster deve sapere che sulla pagina HTML posiamo incontrare due tipi di elementi inline e block. La tipologia del elemento incide sulle tecniche per centrare questo elemento

1. Come centrare testo coi CSS.

Prima di tutto dobbiamo capire cosa sono elementi inline, sono dei elementi che si trovano sulla stessa linea come  per esempio parole in una farse. Come il testo che state leggendo.  Per centrare un testo posiamo utilizzare la proprietà del CSS text-align indicando come valore center

<p style:text-aligin:center>Questo testo e centrato con aiuto di text-align</p>

Questo testo e centrato con aiuto di text-align:center

2. Centrare immagine orizzontalmente

Vediamo di inserire la nostra immagine al interno del tag <p></p> e attribuire a questo tag p proprieta text-aligin: center.

Vorrei anche notare che abbiamo anche un articolo scritto nel passato dedicato a tutti i metodi piu diffusi anche per le  situazioni difficili per centrare una immagine sia in orizzontale sia in verticale. In quello articolo abbiamo descritto i 6 modi piu utilizzati.

Ora vediamo il metodo piu comune e semplice per centrare orizzontalmente una immagine

<p style="text-align:center"><img  src="/img/scarpa.png"></p>

 

3. Centrare un testo e una immagine insieme

Ora vediamo come centrare sia la nostra immagine che il testo che la descrive per esempio sotto e sopra  di essa

Vediamo il codice

  <style>
   .fig {
    text-align: center; /* centrare al centro */ 
   }
  </style>
  <p>Il nostro testo</p>
  <p class="fig"><img src="/images/scarpa.png"width="320" height="181" alt="la nostra scarpa"></p>/* abbimo fatto come descritto in precedenza*/
  <p>La scarpa è molto bella</p>

Il nostro testo

la nostra foto

Il testo dopo la foto

Qui tutto è semplice, utilizzare nuovamente text-align: center;, ma prima rachiudere sia il testo che la immagine in un <div> creando cosi unica scatola per entrambi e gia ad esso attribuire la regola precedente.

  <style>
   .fig {
    display: block; /* elemento block (per vecchie browser) */ 
    text-align: center; /* centrare orizzontalmente   */
   }
  </style>
  <div class="fig"> 
   <img src="/images/scarpa.jpg" width="320" height="179"   alt="Foto ">
   <p>    E una scarpa da tutti i giorni. Immortale e indistruttibile!   </p>
  </div>

Vediamo il risultato

Il nostro testo

Foto

E una scarpa da tutti i giorni. Immortale e indistruttibile!

E per scoprire altri modi per centrare sia in verticale sia in orizontale coi css leggi questo articolo

Guarda anche la video lezione su come centre testo con CSS

video prevui

 

Letto 1319 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso