Pubblicato il

html

css


come centrare o allineare elementi HTML con regole CSS verticalmente guida italiano
Ciao a tutti e benvenuti in questa guida dove vi mostrerò vari modi per centrare elementi HTML verticalmente usando regole CSS all'interno di un container. 

Centare verticalmente con table e vertical-align

Il classico metodo per centrare un elemento all'interno di un container è usando la proprietà CSS display:table per il genitore e vertical-align: middle per l'elemento da centrare.


Vediamo come con il codice HTML e CSS in basso:

<div class="container">     <p id="centro">Elemento da centrare</p> </div>
.container{     background: red;     display:table; } .container p{     display: table-cell;     vertical-align: middle; }
Se visualizziamo il seguente codice HTML vedremo in output il seguente contenuto:

Elemento da centrare

Centrare verticalmente con position absolute e relative 

Un altro metodo comunemente usato per allineare verticalmente un elemento HTML è tramite l'utilizzo delle regole CCS position:absolute e position:relative. Vediamo in basso un esempio:

<div class="container">     <p id="centro">Elemento da centrare</p> </div>
.container{     position:relative; } .container p{     position: absolute;     top: 50%;     width: 100%;     transform: translateY(-50%);
}
Come vedete, andiamo a specificare la posizione absolute per l'elemento da centrare e settiamo la distanza dal bordo superiore a 50%. Per evitare specificare che la distanza sia dal bordo del container genitore e non un'altro div dobbiamo specificare la posizione del container genitore come relative. Per compensare allo spessore dell'elemento da centrare facciamo un translateY(-50%) per tirare su l'elemento.
Di nuovo vediamo che se facciamo un render di questo codice, vedremo in output una box con un elemento centrato verticalmente come mostrato in basso:

Elemento da centrare


Come centrare verticalmente con Flexbox

Forse il metodo più semplice per centrare un elemento è tramite l'uso di Flexbox. Cone questo metodo dobbiamo specificare regole CSS solo per il genitore. Vediamo come:


<div class="container">     <p id="centro">Elemento da centrare</p> </div>
.container{     display:flex;     align-items:center;     justify-content:center; }
Di nuovo se visualizziamo il contenuto in un browser vedremo il seguente in output:

Elemento da centrare


Ci siamo abbiamo visto 3 modi diversi per centrare verticalmente elementi HTML con regole CSS.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)