MICHELEPISANI.IT
 

Posizionare un'immagine al centro di una pagina o di un contenitore

Centrare un'immagine orizzontalmente

CSS - Centrare un'immagine orizzontalmente in un contenitore
Giugno 09
07:562014

Sfuttando 3 semplici proprietà dei CCS standard è possibile centrare orizzontalmente un'immagine all'interno di una pagina web o di un contenitore.

Le proprietà utilizzate sono: display, margin e text-align; quest'ultima serve a garantire la compatibilità con Internet Explorer rendendo così il codice cross-browser. E' possibile visualizzare un esempio immediato del risultato in Fig. 1


centrare orizzontalmente un'immagine
Fig .1 - Immagine centrata orizzontalmente nel contenitore principale

Il codice utilizzato per ottenere l'effetto:

<style type="text/css">
  .centro {
      display:block;
      margin:0px auto;
      text-align:center;
      }
</style>
<img src="nome_immagine.jpg" class="centro" alt="" />

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

2 Commenti

  1. Barbara lunedì 23 aprile 2018 alle ore 19.10

    Ciao Michele
    Devo mettere un'immagine orizontalmente centrato con CSS e ho cercato in tutto il web. Purtroppo anche con tuo sugerimento non funziona.
    Hai un idea perché no?
    cordiali saluti
    Barbara

    Rispondi a questo commento
    • Michele PisaniAutore lunedì 23 aprile 2018 alle ore 23.32

      Ciao Barbara,
      in questo JSFiddle ho inserito l'esempio descritto nell'articolo in questione: https://jsfiddle.net/z5v39sp9/

      Come puoi vedere l'immagine viene centrata orizzontalmente senza aggiunta di ulteriore codice pertanto se a te non funziona, a mio avviso, può dovuto a qualche altra dichiarazione CSS che sovrascrive quelle sopra definite.
      Se puoi inserisci anche te il tuo codice in un JSFiddle così posso darci un'occhiata.

      Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao Fabiana, assicurati di avere esattamente lo stesso indirizzo, numero di telefono e categorie …

Fabiana

a me compare: Non hai pagine da unire. Ho due pagine create da me e ne sono l'amministratrice.

Michele Pisani

Ciao Antimo, il momento in cui è possibile annullare l'operazione di unione delle pagine è quello …

Antimo Cusano

Ciao Michele, sai dirmi se c'è un modo per annullare una richiesta di unione di pagine doppie …