Centrare un elemento html, sia esso in linea o di blocco, o in verticale oppure allineato in orizzontale. Altra situazione: si desidera avere lo stesso elemento che sia perfettamente centrato, nella pagina, sia sull'asse X che sull'asse Y. Sono sempre di più le combinazioni di cui possiamo aver bisogno in una pagina web.
Nel presente articolo avremo modo di vedere sia il codice, sia tutta una serie di esempi per poter risolvere al meglio.
Centrare un elemento inline in orizzontale
Un elemento inline, sia esso testo o link, lo si allinea in orizzontale inserendolo in un elemento parent al quale va assegnata la proprietà text-align:center.
Sintassi HTML
<div class="parent"> Testo centrato orizzontalmente </div>
Sintassi CSS
body{background:#5d7dc0;}
.parent{
background:#fff;
text-align:center;
}
Altro esempio di centratura orizzontale di elementi inline, potrebbe essere quello dei link a href.
Sintassi HTML
<div class="parent"> <a href="#">Link uno</a>
<a href="#">Link due</a>
<a href="#">Link tre</a>
<a href="#">Link quattro</a> </div>
Sintassi CSS
.parent{
background:#fff;
text-align:center;
}
.parent a {
text-decoration: none;
background: #333;
border-radius: 3px;
color: #fff;
padding: 5px 8px;
margin-right:6px;
}
Centrare un elemento di blocco in orizzontale
È possibile centrare un elemento a livello di blocco dandogli margin-left e margin-right impostati su auto. Dichiarare anche la larghezza, altrimenti si estenderebbe per tutta la dimensione del viewport.
Sintassi HTML
<div class="center"> Elemento di blocco centrato in orizzontale </div>
Sintassi CSS
.center {
margin: 0 auto;
width: 250px;
background: orange;
padding: 20px;
color: #111;
}
Centrare più elementi di blocco in orizzontale
Grazie a due differenti proprietà CSS display, è possibile centrare orizzontalmente due o più elementi a livello di blocco in una riga. Tali proprietà sono:
- display: inline-block
- display: flex
Gli elementi di blocco sono inseriti in un elemento parent al quale viene assegnata la proprietà text-align: center. Vediamo il primo esempio.
Sintassi HTML
<div class="parent">
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
</div><!--parent-->
Sintassi CSS
.parent {
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}
.parent div {
background:orange;
color: #111;
margin:10px;
padding: 10px;
max-width: 180px;
display: inline-block;
text-align: left;
}
Elementi di blocco centrati con la proprietà display flex
Sintassi HTML
<div class="flex-center">
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
</div><!--flex-center-->
Sintassi CSS
.flex-center {
display: flex;
justify-content:center;
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}
.flex-center div {
background:orange;
color: #111;
margin:10px;
padding: 10px;
max-width: 180px;
}
Si possono centrare anche più elementi di blocco sovrapposti, sia con uguali dimensioni, sia con larghezze ed altezze differenti.
Sintassi HTML
<div class="parent">
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
</div><!--parent-->
Sintassi CSS
.parent {
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}
.parent div {
background:orange;
color: #111;
margin:10px auto;
padding: 10px;
text-align: left;
}
.parent div:nth-child(1){width:320px}
.parent div:nth-child(2){width:500px}
.parent div:nth-child(3){width:150px}
Centrare un elemento inline in verticale
Singola linea di testo
Un elemento "inline", oppure del semplice testo, appare centrato in verticale, assegnando padding uguale nella parte superiore ed inferiore.
.vertical{
padding-top: 30px;
padding-bottom: 30px;
}
Sintassi HTML
<div class="parent">
<a href="#">Testo</a>
<a href="#">centrato</a>
<a href="#">in</a>
<a href="#">verticale</a>
</div>
Sintassi CSS
.parent {
background: #fff;
margin: 20px 0;
padding: 50px;
text-align:center;
}
.parent a {
background: orange;
color: #111;
padding: 40px 30px;
text-decoration: none;
}
Se il padding non è presente quale proprietà CSS, c'è un altro trucco che si può mettere in pratica per centrare verticalmente una riga di testo in un elemento parent.
.parent {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
Sintassi HTML
<div class="parent">
Linea di testo centrata in verticale
</div>
Sintassi CSS
.parent {
height: 100px;
line-height: 100px;
padding:0 20px;
white-space: nowrap;
background:orange;
width:400px;
color:#111;
margin:0 auto;
}
Centrare in verticale più linee di testo
Assegnare uguale padding, ad un elemento parent, in alto ed in basso, può dare l'effetto del testo centrato quando questo si estende su più righe. Se non si ottiene l'effetto desiderato, il parent potrebbe essere una cella di tabella oppure assegnare delle proprietà CSS affinchè si comporti come se lo fosse.
La proprietà vertical-align gestisce l'allineamento verticale, a differenza della gestione dell'allineamento del testo su un'unica riga.
Sintassi HTML
<table>
<tr>
<td>
Molteplici linee di testo allineate verticalmente in una cella di tabella.
</td>
</tr>
</table>
Sintassi CSS
table {
margin: 0 auto;
background: #fff;
width: 200px;
height: 200px;
border-collapse: collapse;
}
table td {
background: orange;
color: #111;
padding: 20px;
border: 10px solid #fff;
/* allineamento di default vertical-align: middle; */
}
Altro esempio, inserire più righe di testo in un elemento al quale vengono conferite le caratteristiche di una cella di tabella, attraverso i CSS.
Sintassi HTML
<div class="parent">
<p>Molteplici linee di testo allineate verticalmente in un elemento creato come cella di tabella.</p>
</div>
Sintassi CSS
.parent {
margin: 0 auto;
display: table;
height: 200px;
background: white;
width: 200px;
}
.parent p {
display: table-cell;
margin:0;
background: orange;
color: #111;
padding: 20px;
border: 10px solid #fff;
vertical-align: middle;
}
Se non si vuole ricorrere nè alle tabelle nè ad elementi formattate come tali, si può sempre raggiungere lo stesso risultato con la proprietà display: flex.
Sintassi HTML
<div class="parent-flex-vertical-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
Sintassi CSS
.parent-flex-vertical-center{
width:400px;
background: orange;
color: #111;
border: 10px solid #fff;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
resize: vertical;
overflow: auto;
margin: 0 auto;
}
.parent-flex-vertical-center p {
margin: 0;
padding: 20px;
}
Notare bene che si ha il testo allineato in verticale, nell'ultimo esempio postato, solo se il parent contenitore ha un'altezza dichiarata (in px, in % ecc.)
Se queste tecniche non danno il risultato voluto, si può ricorrere al cosiddetto "elemento parent fantasma" nel quale uno pseudo elemento con altezza piena, dichiarata, è incluso in un contenitore ed il testo allineato verticalmente.
Sintassi HTML
<div class="parent-center">
<p>Testo su più righe centrato verticalmente in un contenitore. Introduzione dello <em>pseudo element</em> fantasma</p>
</div>
Sintassi CSS
.parent-center {
position: relative;
}
.parent-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.parent-center p {
display: inline-block;
vertical-align: middle;
width: 200px;
margin: 0 ;
padding: 20px;
background: orange;
color:#111;
}
Allineare in verticale elementi block-level
Non conoscere l'altezza di un elemento block-level, nel layout di una pagina, è prassi molto comune. I motivi sono molteplici.
- può cambiare la larghezza ed automaticamente cambia anche l'altezza
- la dimensione del font e la quantità di testo sono fattori che modificano l'altezza
- elementi con aspect-ratio fisso, quale potrebbe essere una immagine, può modificare l'altezza quando viene ridimensionata
Se si conosce l'altezza di un elemento block-level, si potrebbe procedere nel seguente modo:
.elemento-padre {position: relative;}
.elemento-figlio{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
Allineare in verticale elementi block-level con altezza definita
Il caso più semplice è sicuramente quello in cui si conosce l'altezza dell'elemento block-level da centrare verticalmente. Infatti abbiamo:
Sintassi HTML
<div class="parent">
<div class="child">
Elemento di blocco con altezza fissa, centrato in verticale all'interno del <em>parent</em>.
</div>
</div>
Sintassi CSS
.parent {
background: #fff;
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.parent .child {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 120px;
margin-top: -60px;
background: orange;
color:#111;
padding:20px;
}
Allineare in verticale elementi block-level con altezza sconosciuta
Il caso più comune, e spesso più spinoso, è quello in cui di un elemento block-level non si conosce la sua altezza. La regola CSS da applicare è la seguente:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Sintassi HTML
<div class="parent">
<div class="child">
Elemento block-level con altezza sconosciuta, centrato verticalmente all'interno del suo elemento parent.
</div>
</div>
Sintassi CSS
.parent {
background: #fff;
width: 300px;
height: 300px;
margin: 20px auto;
position: relative;
}
.parent .child {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: orange;
color: #111;
padding: 20px;
transform: translateY(-50%);
}
Con il CSS Flexible Box Layout Module, altrimenti conosciuto come flexbox, allineare in verticale un elemento con altezza ignota è molto più semplice.
la sintassi è la seguente:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
Sintassi HTML
<div class="parent">
<div class="child">
Elemento block-level con altezza sconosciuta, centrato verticalmente all'interno del suo elemento parent.
</div>
</div>
Sintassi CSS
.parent {
background: #fff;
height: 300px;
width: 300px;
padding: 20px;
margin: 20px auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.parent .child {
background: orange;
color: #111;
padding: 20px;
}
Centrare elementi block-level in verticale ed orizzontale
E' possibile combinare tutte le tecniche fino ad ora viste per centrare elementi block-level sia in verticale che in orizzontale all'interno di una pagina web.
Elemento block-level con altezza e largezza assegnata
Utilizzando i margini negativi pari alla metà della larghezza e dell'altezza dell'elemento child, sarà possibile centrarlo in verticale ed in orizzontale all'interno del suo elemento contenitore.
La sintassi è simile alla seguente:
.parent{
position: relative;
}
.child {
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -150px;
}
Sintassi HTML
<div class="parent">
<div class="child">
Elemento block-level con altezza nota centrato verticalmente, e margini negativi, all'interno del suo elemento parent.
</div>
</div>
Sintassi CSS
.parent {
background:#fff;
position: relative;
width:40%;
height:300px;
}
.child {
width: 300px;
height: 150px;
padding: 20px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
}
Elemento block-level con altezza e larghezza sconosciute
Se non si conosce la larghezza o l'altezza è possibile utilizzare la proprietà transform ed uno spostamento negativo pari al 50% in entrambe le direzioni (top e left).
La sintassi è simile alla seguente:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Sintassi HTML
<div class="parent">
<div class="child">
Elemento block-level con dimensioni sconosciute, centrato in verticale ed orizzontale nel suo parent.
</div>
</div>
Sintassi CSS
.parent {
position: relative;
background:#fff;
height: 200px;
width: 40%;
margin: 50px auto;
}
.parent .child {
background: orange;
color: #111;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding:15px;
}
Elemento block-level centrato con CSS Flexbox
Per allineare un elemento block-level in entrambe le direzioni, è possibile farlo anche con CSS Flexible Box Layout Module. E' necessario utilizzare due proprietà per la centratura:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Sintassi HTML
<div class="parent">
<div class="child">
Elemento block-level con dimensioni sconosciute, centrato in verticale ed orizzontale nel suo parent.
</div>
</div>
Sintassi CSS
.parent {
background: #fff;
height: 200px;
width: 40%;
margin: 50px auto;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.parent .child {
background: orange;
color: #111;
width: 50%;
padding: 20px;
}
