Un’ esigenza piuttosto sentita all’interno di un sito web può essere quella di riuscire ad allineare verticalmente determinati oggetti posizionandoli, nello specifico, nella parte centrale o bassa del loro elemento contenitore.

ATTENZIONE! allineare verticalmente un’oggetto posizionandolo nella parte alta del suo elemento contenitore rappresenta il comportamento di base per cui per ottenere questo risultato non è eseguire nessuna operazione aggiuntiva.

Per soddisfare questa esigenza è necessario verificare, innanzitutto che l’elemento da allineare verticalmente sia racchiuso all’interno di un ben preciso elemento contenitore rispetto al quale verrà poi effettuato l’allineamento.

Fatta questa verifica sarà poi necessario utilizzare le seguenti classi:

• .uk-vertical-align: deve essere assegnata all’elemento contenitore rispetto al quale dovrà essere realizzato l’allineamento.

ATTENZIONE! l’elemento contenitore rispetto cui realizzare l’allineamento deve avere necessariamente un’altezza fissata

• .uk-vertical-align-middle: deve essere assegnata all’elemento da allineare e consente di allinearlo centralmente
• .uk-vertical-align-bottom: deve essere assegnata all’elemento da allineare e consente di allinearlo alla parte bassa del suo elemento contenitore

ATTENZIONE! l’elemento da allineare deve avere una larghezza o una larghezza massima inferiore a quella del suo elemento contenitore

Supponendo ora di voler centrare, verticalmente, il testo racchiuso all’interno di un certo box, dovremo utilizzare un markup di questo tipo.

<div class="uk-vertical-align" style=”height:400px”>

<div class="uk-vertical-align-middle">

... /*Contenuti centrati verticalmente*/

</div>

</div>

In Passweb tutto questo può essere realizzato utilizzando due Componenti Contenitore annidati, il primo da utilizzare come elemento paddre dei contenuti da centrare verticalmente e il secondo come contenitore dei contenuti veri e propri.

Al primo andrà quindi assegnata la classe .uk-vertical-align oltre alla solita classe uikit, e andrà impostata per esso una specifica altezza.

Al secondo andrà invece assegnata la classe .uk-vertical-align-middle e al suo interno andranno poi inseriti i contenuti veri e propri.