在同一行的不同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。