L'allineamento degli elementi è una parte fondamentale del design web e permette di controllare come i vari componenti di una pagina si dispongono in relazione l'uno con l'altro. In questa lezione, esploreremo diverse tecniche di allineamento in CSS, analizzando le proprietà e i metodi più comuni.
Prima di iniziare con la spiegazione vera e propria, vogliamo darvi qualche informazione curiosa. Alla domanda Come posso allineare questo elemento al centro? potresti pensare che ci sia una risposta semplice. In realtà no. Negli anni sono nate migliaia di pagine che parlavano di come, ad esempio, allineare un <div>. Sembra una cosa scontata, ma in realtà non lo è affatto. Sono nate diverse meme proprio su questo:
Foto: @iamnotanartist_ da www.instagram.com
Ora andiamo a vedere come allineare gli elementi in CSS.
Vediamo come allineare orizzontalmente e verticalmente i testi e gli elementi inline.
Per allineare i testi e gli elementi inline (ovvero link, immagini, ecc. di cui abbiamo parlato nella lezione HTML sugli elementi block e inline) orizzontalmente, possiamo utilizzare la proprietà text-align:center, che abbiamo visto nella lezione su come allineare i testi.
<div>Questo testo è al centro</div>
<div> <a href="#1">Link1</a> <a href="#2">Link2</a> </div>
<style>
div {
text-align: center;
}
</style>Il modo più semplice per allineare verticalmente un testo o altri elementi inline è l'utilizzo del padding, che abbiamo visto nella lezione sul padding, sia in alto che in basso.
<div>Questo testo è al centro</div>
<div> <a href="#1">Link1</a> <a href="#2">Link2</a> </div>
<style>
div {
padding: 20px 0;
border: 1px solid grey;
}
</style>Un altro metodo che puoi utilizzare per l'allineamento verticale è line-height, proprietà per lo spazio del testo in CSS che specifica lo spazio tra le righe. Aggiungendo white-space:nowrap evitiamo che il testo vada a capo.
<div>Questo testo è al centro</div>
<div> <a href="#1">Link1</a> <a href="#2">Link2</a> </div>
<style>
div {
line-height: 100px;
white-space: nowrap;
border: 1px solid grey;
}
</style><div>)Allineare gli elementi block (come i <div>) può essere più complicato di quelli inline. Vediamo come farlo.
È possibile centrare un elemento block orizzontalmente specificando sia il margine destro che sinistro come auto. È necessario specificare un valore di width, in quanto gli elementi block generalmente occupano l'intera larghezza della pagina.
<div>Questo elemento è al centro</div>
<style>
div {
margin: 0 auto;
width: 50%;
border: 1px solid grey;
}
</style>Questo metodo è utilizzato spesso anche per le immagini. Basta impostare un display uguale a block.
<img src="foto.png" alt="Immagine centrata orizzontalmente">
<style>
img {
display: block;
margin: 0 auto;
width: 50%;
}
</style>Puoi allineare gli elementi, a destra o a sinistra, usando la proprietà float, che abbiamo visto nella lezione dedicata. Ricorda che con float non è possibile allineare al centro l'elemento.
<div>Questo elemento è a sinistra</div>
<style>
div {
float: right;
width: 50%;
border: 1px solid grey;
}
</style>Per allineare verticalmente un elemento, ad esempio un <div>, il modo più veloce è utilizzare Flexbox, un metodo che vedremo nella lezione sul Flexbox. In questo modo, è possibile allineare sia orizzontalmente che verticalmente un elemento.
<div class="flexbox">
<div>Questo elemento è al centro</div>
</div>
<style>
.flexbox {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid grey;
}
.flexbox > div {
background-color: LightSkyBlue;
width: 100px;
height: 100px;
}
</style>Nell'esempio, abbiamo utilizzato un selettore combinato (.flexbox > div). Se non lo conosci, non preoccuparti: lo vedremo nella lezione dei selettori combinati. Per ora, basta sapere che .flexbox > div indica il <div> all'interno del <div> più esterno.
Per allineare verticalmente un elemento, è anche possibile utilizzare position, che abbiamo visto nella lezione sula posizione degli elementi. È necessario anche usare transform (che vedremo nella lezione sulle trasformazioni 2D e 3D), per posizionare l'elemento correttamente:
<div class="relative">
<div>Questo elemento è al centro</div>
</div>
<style>
.relative {
position: relative;
height: 200px;
border: 1px solid grey;
}
.relative > div {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: red;
color: white;
}
</style>Se vuoi, invece, allineare anche orizzontalmente un elemento con position, puoi fare in questo modo:
<div class="relative">
<div>Questo elemento è al centro</div>
</div>
<style>
.relative {
position: relative;
height: 200px;
border: 1px solid grey;
}
.relative > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
color: white;
}
</style>