Arrange varying sized images into separate divs within a single 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>

https://i.sstatic.net/Gzy7U.png

In the displayed row of organizational logos, there is an alignment issue with the APS logo. To center all the images despite their varying sizes, what steps should be taken?

htmlcss

Answer №1

Try applying this CSS code and check if it appears satisfactory:

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

Remember, it is advisable not to specify both width and height at the same time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to get my list to adjust properly as the screen size increases

I am currently in the process of creating a website that features a homepage navigation menu. When users hover over the menu options, those with arrows will reveal a submenu with additional selections below them. Here is an image for reference (https://i.s ...

htmlcssresponsive-designfrontendresponsive

How to keep a button active using CSS in a different area of the webpage

I'm new to coding in javascript and I could use some assistance solving an issue on my test website. The problem involves creating a top menu with an active button that stays highlighted when clicked. In this case, I specifically need the active CSS c ...

javascriptjqueryhtmlcss

CSS animation properties

Is it possible to animate only the div container and not the "p" inside? div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 ...

htmlcss

Designing divs of the same dimensions with a wrap-around effect

I'm currently working on developing a menu system that incorporates images and text above and below each image. The content is dynamic, so I need the menu layout to display with equal spacing between each image, creating a grid-like pattern both horiz ...

htmlcssflexbox

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

What are the steps to display JSON data within an HTML div?

Struggling to display this JSON data within an HTML div [{ "botten": ["Crispy", "thin"] }, ] The HTML document's div has the class name box1_data. Below is my script: var crustInfo = document.getElementsByClassName("box1_data"); $.getJSON(' ...

javascriptjqueryhtmljson

.jquery_materia_chip() function malfunctioning

I'm looking to implement a tagging feature using chips on my website. Below is the HTML code I have so far: <div class="chips chips-autocomplete"> <input type="text" autocomplete="true"> </div> Within the <script> tag, I&apos ...

jqueryhtmlmaterialize

Using JavaScript, extract elements from an HTML string that have the class "X" and then store them in an array

In need of assistance with converting a large amount of text content elements into a JSON format using only pure Javascript (no jquery). These elements must then be placed into a JSON array. For instance, transforming: <li class="asd">1</li> ...

javascripthtmlarraysjsonparsing

Having difficulty integrating a Hangout button using APIs on my webpage

I'm having some trouble adding a basic Hangout button component to initiate Google's Hangout. I've been following the steps outlined on the Google Developer page, but despite my efforts, I can't seem to resolve the following issue: Fai ...

javascripthtmlgoogle-apigoogle-hangouts

The template seems to be holding out for the Observable to produce a single yield

Upon obtaining an array through a service, the template is used to create a list using *ngFor. The initial list functions correctly, however, there is a second list that utilizes a subset of the array and results in the following error: ERROR TypeError ...

htmlangulartypescriptangular6

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts

Is it possible to use both Angular.js html5mode(true) and traditional anchor href links together?

So here's the issue I'm facing: I prefer to use an URL like instead of Luckily, I was able to solve this problem by enabling html5mode(true). It works perfectly for me! However, a new problem arises when a user directly enters //www.domain.co ...

javascripthtmlnode.jsangularjshyperlink

Discover the neighboring characters of an element within a block of text

Recently, I encountered a unique challenge. My task involves identifying the first 3 characters before and after an anchor tag within a paragraph. For example: <p>This is <a href='#' id='lock'>a</a> test for an anch ...

javascriptjqueryhtmlregex

Guide to retrieving images in HTML divs using an API

I am having an issue with appending an image and title post to HTML as it is repeating for all the elements. I simply want each image and title to display once. Here is the HTML code: <div class="row"> <div class="col-md-3 text-center get-im ...

javascriptjqueryhtml

Ways to eliminate the ul elements from the result of a radiobuttonlist

As part of my project, I developed a unique custom field type known as RadioList. This RadioList class is an extension of the RadioButtonList class and utilizes repeatlayout UnorderedList. My goal is to eliminate the <ul> and <li> tags from th ...

c#htmlasp.net.net

Having trouble displaying the background image in a Bootstrap jumbotron

I have tried everything I could find in my research, but I still can't get the background image to show up on the jumbotron. Currently, I am attempting to use an image from the images folder without success, and even trying a link doesn't work. I ...

htmlcssbootstrap-4

Ensure the images are resized to perfectly fit within their parent container while still preserving their original aspect

I have a div structure below where the height of #myMenu is dynamic. How can I ensure that the images maintain their aspect ratio when the height of #myMenu changes? Here is the intended outcome: <div id="myMenu"> <div class="col col20"> ...

htmlcss

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...

htmlcssinternet-explorer-8

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

What is the reason behind line-height not affecting the clickable area when reduced?

I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue. To demonstrate the problem, I created a Stackblitz project here: https:// ...

cssangularonclickgrid-layoutline-height