La classe .uk-container assegnata ad un elemento di blocco, come può essere ad esempio una < div >, consente di impostare per l’elemento stesso una ben precisa larghezza massima.

Nello specifico:

• per viewport minori di 1220px la classe .uk-container assegna all’elemento cui viene applicata una larghezza massima di 980px
• per viewport maggiori o uguali a 1220px la classe .uk-container assegna all’elemento cui viene applicata una larghezza massima di 1200px

Quelli appena indicati sono i valori di default utilizzati dal framework, valori questi che possono comunque essere personalizzati come al solito agendo dallo style editor di Passweb, direttamente all’interno del file uikit.css oppure a priori mediante il Customizer

Generalmente questa classe viene assegnata ai cosiddetti “contenitori strutturali” ossia quelli che dovranno poi accogliere al loro interno tutti i contenuti della pagina web.

Proprio per questa ragione un’altra esigenza fondamentale potrebbe essere non solo quella di assegnare a questi elementi una larghezza massima ma anche e soprattutto fare in modo che i loro contenuti siano perfettamente centrati.

Per soddisfare entrambe queste esigenze, ossia per racchiudere determinati contenuti all’interno di un container, quindi di un elemento con una certa larghezza massima, e allo stesso tempo, posizionare questo container esattamente al centro del suo elemento padre (generalmente al centro della pagina web) sarà necessario utilizzare oltre alla classe .uk-container anche la classe .uk-container-center

.uk-container-center: consente di centrare orizzontalmente ( rispetto al suo elemento padre) lo specifico elemento di blocco cui viene applicata

Per comprendere meglio quanto detto consideriamo un semplice esempio. Supponiamo di voler racchiudere tutti i contenuti che andranno in Testata al nostro sito, all’interno di un contenitore che abbia una larghezza massima preimpostata e che si posizioni esattamente al centro della pagina web.

Per soddisfare questa esigenza sarà sufficiente utilizzare un markup di questo tipo:

<div id="Testata" class="uk-container uk-container-center">

... /*Contenuti da inserire in testata*/

</div>