0

I am using css and bootstrap to develop a website and using verticle-align:middle; is not working how it should, but on research of this topic I found a solution to vertical align items but it may not work in older browsers.

This is what I found that work centering images in the columns that they are in.

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

    }
}
}

This is what I tried using but could not get it to work.

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

This is the HTML 

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

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

   </div>
</div>
</section>

From what I researched all you need to do is set the parent to display as a table, and then the child is displayed as a table cell and you set vertical algin to middle. What am I missing from the picture?

John
  • 33
  • 1
  • 2
  • 6
  • 1
    Your code appears to simply stack the images on top of each other for me: https://jsfiddle.net/vo09rx04/. What *exactly* are you trying to achieve, and what is not happening in the way you would expect? Also, are you using `SCSS`? Can you please ensure you are providing a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) – Obsidian Age Oct 19 '17 at 21:19
  • Trying to make a row of 6 columns all with logos in them. The logos are not all the same hieghts. I ma using bootstrap 4 alpha. That could be why its not rendering like it is on my screen. – John Oct 19 '17 at 21:30
  • Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) – Ajit Panigrahi Oct 19 '17 at 21:36

1 Answers1

0

The parent div is missing position:relative;

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;
    }
}
}
John
  • 33
  • 1
  • 2
  • 6