Layout CSS - Allineamento orizzontale e verticale
Centrare gli elementi
orizzontalmente e verticalmente
Allineamento centrale elementi
Per centrare orizzontalmente un elemento di blocco (come <div>), utilizzaremargin: auto;
L'impostazione della larghezza dell'elemento impedirà che si allunghi fino ai bordi del suo contenitore.
L'elemento occuperà quindi la larghezza specificata e lo spazio rimanente verrà diviso equamente tra i due margini:
Questo elemento div è centrato.
Esempio
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Nota: l'allineamento al centro non ha effetto se la width
proprietà non è impostata (o impostata su 100%).
Allinea al centro il testo
Per centrare semplicemente il testo all'interno di un elemento, usatext-align: center;
Questo testo è centrato.
Esempio
.center {
text-align: center;
border: 3px solid green;
}
Suggerimento: per ulteriori esempi su come allineare il testo, vedere il capitolo Testo CSS .
Centrare un'immagine
Per centrare un'immagine, imposta i margini sinistro e destro auto
e trasformala in un block
elemento:
Esempio
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Allineamento sinistro e destro - Utilizzo della posizione
Un metodo per allineare gli elementi consiste nell'usare position: absolute;
:
Nei miei anni più giovani e vulnerabili, mio padre mi ha dato alcuni consigli che da allora mi sono ripensato.
Esempio
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Nota: gli elementi posizionati assoluti vengono rimossi dal flusso normale e possono sovrapporsi agli elementi.
Allineamento sinistro e destro - Usando float
Un altro metodo per allineare gli elementi consiste nell'utilizzare la float
proprietà:
Esempio
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Il clearfix Hack
Nota: se un elemento è più alto dell'elemento che lo contiene ed è mobile, traboccherà fuori dal suo contenitore. Puoi usare il "clearfix hack" per risolvere questo problema (vedi esempio sotto).
Senza Clearfix
Con Clearfix
Quindi possiamo aggiungere l'hack clearfix all'elemento contenitore per risolvere questo problema:
Esempio
.clearfix::after {
content: "";
clear: both;
display: table;
}
Centra verticalmente - Usando il riempimento
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding
:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding
and text-align: center
:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height
property with a value that is equal
to the height
property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding
and line-height
are not options, another solution is to use positioning and the transform
property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.