css vertikale Ausrichtung funktioniert nicht richtig

Ich verwende CSS und Bootstrap, um eine Website zu entwickeln und verticle-align zu verwenden: middle; funktioniert nicht wie es soll, aber auf der Suche nach diesem Thema habe ich eine Lösung gefunden, um Elemente vertikal auszurichten, aber es funktioniert möglicherweise nicht in älteren Browsern.css vertikale Ausrichtung funktioniert nicht richtig

Dies ist, was ich, dass die Arbeit Zentrieren Bilder in den Spalten gefunden, dass sie in sind.

.logo-container{ 
    height: 100%; 
    display: flex; 
    align-items : center; 
    .logo{ 

    } 
} 
}

Dies ist, was ich versuchte, mit, aber nicht arbeiten kann.

section#providers{ 
.logo-container{ 
    height: 100%; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
}

Dies ist die HTML

<section id="providers"> 
 
\t <div class="container"> 
 
\t \t <div class="row" id="logos"> 
 

 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-2"> 
 
\t \t \t \t <div class="logo-container"> 
 
\t \t \t \t \t <div class="logo"> 
 
\t \t \t \t \t \t <img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t </div> 
 
</div> 
 
</section>

Von dem, was ich recherchiert alles, was Sie tun müssen, um das übergeordnete gesetzt wird als Tabelle angezeigt werden, und dann wird das Kind angezeigt als eine Tabellenzelle und Sie setzen vertikales Algin in die Mitte. Was fehlt mir auf dem Bild?

Quelle

2017-10-19 John

Ihr Code scheint einfach die Bilder übereinander für mich zu stapeln: https://jsfiddle.net/vo09rx04/. Was genau willst du erreichen, und was passiert nicht so, wie du es erwarten würdest? Verwenden Sie auch 'SCSS'? Können Sie bitte sicherstellen, dass Sie ein [** minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) bereitstellen. Weitere Informationen finden Sie in der Hilfe zu [** Wie stelle ich gute Fragen?] (Http://stackoverflow.com/help/how-to-ask) und auf der [** Tour der Site **] (http://stackoverflow.com/tour) :) –

Der Versuch, eine Reihe von 6 Spalten alle mit Logos in ihnen zu machen. Die Logos sind nicht alle gleich hoch. Ich benutze Bootstrap 4 alpha. Das könnte der Grund sein, warum es nicht so aussieht, wie es auf meinem Bildschirm ist. – John

Mögliches Duplikat von [Wie wird ein Bild innerhalb eines div? Vertikal ausgerichtet?] (Https://stackoverflow.com/questions/7273338/how-to-vertical-align-an-image-inside-a-div) – AjitZero

Das übergeordnete div fehlt position: relativ;

section#providers{ 
.logo-container{ 
    position: relative; 
    height: 100%; 
    //display: flex; 
    //align-items : center; 
    display: table; 
    .logo{ 
     width: 100%; 
     display: table-cell; 
     vertical-align: middle !important; 
    } 
} 
}

Quelle

2017-10-19 21:54:13 John

css vertikale Ausrichtung funktioniert nicht richtig

Antwort

Verwandte Themen