在同一行的不同div中对齐不同大小的图像

Question

<div class="row org-logo m-b-lg">
    <div class="col-sm-3 col-xs-6  text-center">
        <a href="http://www.psychologicalscience.org/" target="_blank"><img src="/static/img/meeting-page/APS.jpg" alt="Logo for American Physiological Society (APS)" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <a href="http://www.bitss.org/" target="_blank"><img src="/static/img/meeting-page/BITSS.png" alt="Logo for Berkeley Initiative for Transparency in the Social Sciences (BITSS)" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <a href="http://www.nrao.edu/" target="_blank"><img src="/static/img/meeting-page/NRAO.jpg" alt="Logo for National Radio Astronomy Observatory (NRAO)" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <a href="http://www.spsp.org/" target="_blank"><img src="/static/img/meeting-page/SPSP.jpg" alt="Logo for Society for Personality and Social Psychology (SPSP)" class="img-responsive"></a>
    </div>
</div>

以上是不同组织的一行徽标的屏幕截图。很明显，APS的徽标与其他徽标没有正确对齐。如果我想根据图像中心对齐这些不同尺寸的徽标图像，我该怎么办？

Answer 1

只要给这个CSS，看看它看起来没问题吗？

.img-responsive {
  min-height: 85px;
  max-height: 85px;
  vertical-align: top;
}

只需注释，不要同时提供width和height。