css垂直对齐不能正常工作

我正在使用css和bootstrap来开发一个网站，并使用verticle-align：middle;是不是它应该如何工作，但在研究这个主题时，我发现了垂直对齐项目的解决方案，但它可能无法在旧浏览器中工作。css垂直对齐不能正常工作

这是我发现，工作，他们是在列居中的图像。

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

    } 
} 
}

这是我尝试使用，但不能让它开始工作。

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

这是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>

从我研究了所有你需要做的是设置父显示为一个表，然后将子显示为一个表格单元格，并将垂直algin设置为中间。我从照片中遗漏了什么？

来源

2017-10-19 John

您的代码似乎只是将图像堆叠在彼此之上：https：//jsfiddle.net/vo09rx04/。你究竟想要达到什么样的目标，以及以什么样的方式实现你期望的目标？另外，你使用'SCSS'吗？你能否确保你提供[**最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve）。有关详细信息，请参阅有关[**如何提出良好问题**]（http://stackoverflow.com/help/how-to-ask）的帮助文章，并参加该网站的[**游览**]（http://stackoverflow.com/tour）:) –

尝试制作6列所有带有徽标的行。徽标并不完全相同。我可以使用引导4阿尔法。这可能就是为什么它不在我的屏幕上渲染。 – John

[如何垂直对齐div中的图像？]（https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div） – AjitZero

父div缺少位置：相对;

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; 
    } 
} 
}

来源

2017-10-19 21:54:13 John

css垂直对齐不能正常工作

回答

相关问题