Allineamento verticale in Bootstrap 4

Ho seguito la configurazione in Bootstrap 4: collegamento Bootply

L’elemento con il testo “Fornitore” deve essere centrato verticalmente, ho righe diverse con lo stesso codice e le voglio centrate. Nessuna soluzione sembra funzionare per me.

Qualcuno può trovare qui quello che ho fatto di sbagliato e indicarmi la giusta direzione?

Grazie.

Puoi usare la class flex-xs-middle come questa ..

Bootstrap 4 Alpha 5

 
Supplier
Supplier

http://www.codeply.com/go/PNNaNCB4T5 (Utilizzo del CSS triggersto da Bootstrap 4 per la flessibilità)

Bootstrap 4


AGGIORNAMENTO per Bootstrap 4.0.0

Ora che Bootstrap 4 è flexbox, di default ci sono molti approcci diversi per l’allineamento verticale usando: auto-margini , utility flexbox o gli utilities di visualizzazione insieme agli utilizzatori di allineamento verticale . Inizialmente “vertical align utils” sembra ovvio ma funzionano solo con elementi di visualizzazione inline e da tavolo. Di seguito sono riportate le opzioni di centraggio verticale Bootstrap 4. Ricorda, l’allineamento verticale è relativo all’altezza del genitore .


1 – Centro verticale che utilizza i margini automatici:

Un altro modo per centrare verticalmente è usare my-auto . Questo centrerà l’elemento all’interno del suo contenitore. Ad esempio, h-100 rende la riga a tutta altezza e my-auto centrerà verticalmente la col-sm-12 .

 
Card

Centro verticale che utilizza la demo dei margini automatici

my-auto rappresenta i margini sull’asse y verticale ed è equivalente a:

 margin-top: auto; margin-bottom: auto; 

2 – Centro verticale con Flexbox:

colonne verticali della griglia centrale

Dal momento che Bootstrap 4 .row è ora display:flex puoi semplicemente usare l’ align-self-center su qualsiasi colonna per .row verticalmente …

  
Center
Taller

oppure, usa align-items-center sull’intero .row per centrare verticalmente allineare tutti i col-* nella riga …

  
Center
Taller

Demo di colonne verticali con altezza differente

Importante : il padre diretto dell’elemento da allineare deve avere un’altezza definita !


3 – Centro verticale che utilizza i visualizzatori:

Bootstrap 4 ha utilità di visualizzazione che possono essere utilizzate per la display:table , display:table-cell , display:inline , ecc. Questi possono essere usati con l’ allineamento verticale util per allineare elementi inline, inline-block o table cell.

 
I am centered vertically

Centro verticale che utilizza la demo di Display Utils