CODEWITHSUNDEEP
htmlcss
adlius45
adlius45

Reputation: 39

Align images of different size in different div of the same row

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

enter image description here

Above is the screenshot of a row of logos of different organizations. It is obvious that the logo of APS is not properly aligned with the other logo. What do I do if I want to align these logo images, each of different sizes, according to the center of the image?

Upvotes: 0

Views: 1524

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Just give this CSS and see if it looks okay?

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

Just a note, do not give both width and height.

Upvotes: 2

Related Questions