Come centrare orizzontalmente o verticalmente testo, immagini o altri oggetti HTML.

Come centrare in orizzontale e in verticale un elemento HTML usando il CSS e l'HTML5.

Per inserire in modo simmetrico un oggetto in un layout il sistema più usato è quello di centrarlo sia esso un testo, una immagine, un video o una tabella. Negli Editor dei post ci sono dei pulsanti specifici per centrare testo o anche per centrare immagini ma non sempre possono essere utilizzati. In questo articolo vediamo come si possa usare il CSS per questa apparentemente semplice operazione.

Chi non abbia neppure una conoscenza propedeutica di questi temi può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS. Cominciamo con la cosa più semplice.

CENTRARE ORIZZONTALMENTE

Si può centrare orizzontalmente gli elementi di una riga con questo codice

<style>
.centrare {
  text-align: center;
}
</style>
<div class="centrare">Elemento da visualizzare al centro della riga</div>

che però può anche essere utilizzato in un'altra forma equivalente

<div style="text-align: center;" >Elemento da visualizzare al centro della riga</div>

Nel primo caso si crea la classe centrare mentre nel secondo caso il CSS è inserito inline. In seguito utilizzerò la prima notazione ricordando però che si può passare da una all'altra. La prima notazione è utile per inserire i CSS nel modello, segnatamente incollandoli sopra alla riga </head> mentre la seconda parte del codice vale a dire il tag <div> (o <p>) dovrà essere inserito nell'articolo.  Nel secondo caso invece si incolla tutto nel post in modalità HTML.

CENTRARE UN ELEMENTO BLOCCATO

Per centrare una immagine o un altro oggetto come potrebbe essere un contenitore <div> si usano i tag dei margini vale a dire margin-left e margin-right. Per rendere le cose più semplici si utilizza questo CSS

<style>
.centrami {
  margin: 0 auto;
}
</style>
<div class="centrami" style="width:300px; height:100px; background-color:#aff;">Testo inserito nel centro del rettangolo contenitore da 300x100 pixel</div>

che produce questo risultato



dove il CSS fondamentale è quello evidenziato di giallo. 0 è il margine sia in alto sia in basso mentre auto rappresenta il margine di sinistra e di destra che saranno quindi uguali per centrare l'elemento.

TRE ELEMENTI DI BLOCCO CENTRATI NELLA STESSA RIGA

Il codice che si può usare per centrare tre contenitori è il seguente

<style>
body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}
</style>
<main class="inline-block-center">
  <div>
    Primo elemento di blocco centrato in una riga  </div>
  <div>
    Secondo elemento di blocco centrato in una riga con più elementi degli altri due che sono adiacenti.  </div>
  <div>
    Terzo elemento di blocco centrato in una riga.  </div>
</main>

con questo risultato



Il blocco di codice evidenziato di giallo serve solo per lo sfondo.

CENTRARE VERTICALMENTE UN TESTO

Si utilizza un codice come il seguente

<style>
body {
  background: #f06d06; 
}
main {
  background: white;
  margin: 20px 0;
  padding: 40px;
}
main div {
  background: black;
  color: white;
  height: 100px;  line-height: 100px;
  padding: 20px;
  width: 50%;
  white-space: nowrap;
}
</style>
<main>
  <div>
    Testo centrato verticalmente all'interno di un contenitore  </div>
</main>

con questo risultato

Il trucco è quello di porre l'altezza della riga uguale all'altezza del contenitore. In questo come in altri codici si usa il tag <main> che è stato introdotto con l'HTML5 che serve a individuare la parte principale di un documento.

CENTRARE VERTICALMENTE PIÙ RIGHE

Si usa questo nuovo codice

<style>
body {
  background: #f06d06; 
}
div {
  background: white;
  width: 240px;
  margin: 20px;
}
.flex-center {
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}
.flex-center p {
  margin: 0;
  padding: 20px;
}
</style>
<div class="flex-center">
  <p>Più linee centrate verticalmente in un contenitore in modo da avere la stessa distanza tra parte alta e bassa.</p>
</div>

con questo risultato

CENTRARE VERTICALMENTE UN ELEMENTO DI BLOCCO

Si può usare un codice simile a questo

<style>
body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;
}
main div {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}
</style>
<main> 
  <div>
     Elemento centrato verticalmente con una altezza non conosciuta a priori  </div> 
</main>

con il seguente risultato

CENTRARE ORIZZONTALMENTE E VERTICALMENTE UN ELEMENTO

Quando si vuole centrare sia orizzontalmente sia verticalmente si può partire da questo codice

<style>
body {
  background: #f06d06; 
}
main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}
</style>
<main> 
  <div>
     Elemento centrato verticalmente e orizzontalmente con una altezza non conosciuta a priori   </div> 
</main>

che produce questo risultato

COME CENTRARE VIDEO E WIDGET

Tutti i codici presentati sono stati testati con lo strumento Real Time HTML Editor in cui si può incollare un codice nella parte alta e si può subito vedere in basso come viene interpretato dai browser. I codici precedenti sono stati realizzati per del semplice testo ma quasi tutti (non quello per una riga centrata verticalmente) possono essere usati sostituendo il  semplice testo con l'HTML di un testo formattato o con il codice di un oggetto quale un video o un widget. Se noi incolliamo nello strumento Real Time Editor il codice seguente

<style>

.centrare {

  text-align: center;

}

</style>

<div class="centrare"><iframe width="560" height="315" src="//www.youtube.com/embed/yymd-GmyB-s" frameborder="0" allowfullscreen></iframe></div>

visualizzeremo il video centrato nel layout. I codici per centrare le immagini possono essere semplificati ulteriormente come mostrato in questa ultima sezione.

COME CENTRARE ORIZZONTALMENTE UNA O PIÙ IMMAGINI

Nella fattispecie di una immagine si può usare questo codice

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/400/300"/>

dove l'URL in rosso è quello della immagine. Per centrare una serie di immagini in modo da avere il loro centro allineato si incollano i loro codici uno dopo l'altro con dei salti di riga <br/>

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/600/300"/>
<br/>
<br/>
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/450/200"/>

che porta a questo risultato

Per le immagini generiche ho usato Lorem Pixel.