Interfaccia utente semantica - Centratura verticale a div

Question

Esistono metodi noti per centrare un tag <div> utilizzando il framework di sviluppo Web di Semantic UI, senza aggiungere i miei stili CSS personalizzati?

Ho provato diversi tag relativi alla posizione nello documentation, ad esempio <div class="centered grid'>, tuttavia questi funzionano solo per il centraggio orizzontale.

Questo non è il caso di un'implementazione stimolante, sono solo sorpreso di qualcosa di così comune come il centraggio verticale non è incluso in un framework di sviluppo web, e sono curioso di sapere se le mie ricerche e gli occhi di Google non siano trasparenti. Preferirei rispettare gli stili del framework prima di creare stili personalizzati. So che ci sono diversi metodi per implementare il mio centraggio verticale (questa è l'opzione meno preferibile a mio parere da implementare), tuttavia preferirei usare una classe dal framework.

Answer 1

Come da Semantic UI v2.2.2, è possibile forzare l'allineamento verticale nel mezzo aggiungendo middle aligned classe (i). Colpisce i seguenti elementi:

• table, righe e delle cellule,
• grid, righe e colonne,
• image,
• list e item con un'immagine,
• modale contenuto finestra .

Tu non possibile impostare l'allineamento verticale in mezzo quel modo per un div elemento arbitrario, fuori di qualsiasi di queste strutture.

Altrimenti, alcuni altri elementi semantico UI allineare il loro contenuto verticalmente al centro di default:

• header o message con un'icona o un'immagine,
• circular segment,
• step,
• button ecc.