Impostare un’immagine al centro della pagina usando il css può essere un fattore utile durante la fase di creazione web; per questo motivo in questo articolo ho scritto un breve tutorial su come impostare l’immagine in posizione centrale di una pagina web usando il codice css.
Come si mette un’immagine al centro in css?
Per prima cosa elenchiamo le proprietà che dovremo utilizzare:
- display: block;
- margin: 0 auto;
Cosa significa “display: block” nel css?
La proprietà “display” del codice css indica che il riquadro con cui dovrà avvenire l’interpretazione dell’elemento (il rendering), quindi potremmo dire la “modalità” di visualizzazione.
L’impostazione “block” permette di impostare l’elemento come un elemento blocco.
Cosa significa “margin: 0 auto” nel css?
Con la proprietà “margin” nel codice css vengono a crearsi degli spazi che circondano l’elemento, nonostante non siano caratterizzati da un bordo.
Con “auto” si stabilisce che l’elemento dovrà dividere in maniera uguale il margine destro e sinistro, pertanto si posizionerà al centro.
Quindi come si imposta un’immagine al centro usando il css?
Per mettere al centro della pagina l’immagine dovremo quindi porre l’elemento in una classe (nel codice d’esempio la classe si chiama “souvlaki”) mentre dentro lo style della classe imposteremo le proprietà “display: block;” e “margin: 0 auto;”. Di seguito espongo il codice css d’esempio.
Codice d’esempio CSS con immagine al centro
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
}
.souvlaki {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img class="souvlaki" src="URL_IMMAGINE_DA_CENTRARE"</a>
</body>
</html>
Altri articoli tutorial sul css:
- Qual’è la differenza fra “id” e “class” nel css?
- Come fare il padding col css?
- Come fare la dimensione del font in css?