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.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un 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

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …

Michele

Ciao Antonio,
probabilmente stai utilizzando un'opzione non prevista per jarsigner e la …

Antonio

Ricevo questo errore da cosa dipende? Illegal option\: …