Is there a way to make smaller svg images align side by side instead of wrapping or being pushed to the next line?

I am trying to display 6 svg images side by side in a row, but I am encountering some layout issues.

The images have varying widths, but the same height. I have used the height property to scale them proportionally. However, the image container is taking up the full width of the layout grid, causing the images to stack vertically instead of appearing in a row.

Below is the code I am using:

        <div class="gridContainer clearfix">
         <div class="sponsorLogo">
         <img src=_assets/images/logo_1.svg/>
         <img src=_assets/images/logo_2.svg/>
         <img src=_assets/images/logo_3.svg/>
         <img src=_assets/images/logo_4.svg/>
         <img src=_assets/images/logo_5.svg/>
         <img src=_assets/images/logo_6.svg/>
         </div>
       </div>

.sponsorLogo img {
text-align: center;
height: 3em;
}

When I use the width property to align them in a row, the images end up with different heights.

Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!

htmlcssimagesvgdreamweaver

Answer №1

Here is a suggestion:

.sponsorLogo img {
  align-text: center;
  size: 3em;
  display: inline-block;
}

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

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome. a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:# ...

css

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

I need to select multiple checkboxes from different sections, count them, and then append the same number of sections to another div. ...

javascriptjqueryhtml

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

Error message in console: AngularJS throws an error saying 'No module found: uiCropper'

Hey there, I'm looking to add an image cropper to my webpage. I came across some code on Codepen, but when I tried using it, the code didn't work and I encountered this error https://i.sstatic.net/h5F4T.png angular.module('app', [&ap ...

javascripthtmlcssangularjs

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

htmljsonnode.jsmongodbmongoose

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Trying to execute the code below on a Wix website using "Embed HTML", but IFRAME is blocking scripts. Seeking help to embed custom HTML with JavaScript on platforms like Wix.com or Wordpress.com, as the embedded code is not functioning due to IFRAME restri ...

javascripthtmlwordpressiframevelo

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

cssangularjstwitter-bootstrap

Is there a way to ensure uniform display of HTML form error messages across various browsers?

Recently, I completed a login form that consists of username and password fields. For the username, I used a text field with the type email, while for the password, I utilized a text field with the type password which requires validation through a regex pa ...

javascripthtmlangularjsvalidationconstraint-validation-api

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

javascriptcssgridstack

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

javascripthtmlcss

What is the best way to remove the hover effect from a specific element within a div?

I am looking to achieve a specific hover effect where the white part does not darken when hovering over a certain element within its child elements. Here is the HTML code I have: <div className= {css.searchBarDiv}> <div className={css.searchBar ...

javascripthtmlcssreactjs

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css

Instructions for launching an Android app from a website

Is it possible to invoke my app from HTML? For instance, I am able to successfully call a webpage from my app using this code. android code: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse( "myDomain.com"))); ...

javascriptandroidhtmliosweb

Preview not showing CSS changes properly

1) I am encountering an issue with displaying CSS in a form preview tab. Despite setting the CSS, it does not reflect on the fields after clicking the preview button. 2) Are there alternative methods to open the tab in a new window rather than opening it ...

javascriptjqueryhtmlcsspreview

Utilizing the GET method within a form

I'm currently working on testing a form to ensure that my input values are being submitted correctly. At this point, I haven't set up any server script yet. However, I was hoping that upon clicking submit, I would be able to see my values appende ...

jqueryhtml

Designing a unique form in Wordpress with custom file upload functionality

I am struggling with implementing file upload functionality in my WordPress PHP page. I have a form that updates a database with input field data, but now I want to be able to upload a file/picture to a specific folder and store the link in my database. ...

phpwordpressimageupload

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

DEMO Creating a script that captures mouse click coordinates and appends them to a list. The functionality works, except for an issue with the clear button not working properly. After making corrections in jsfiddle, the script functions correctly. Howeve ...

javascriptjqueryhtmlbuttonjsfiddle

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

Discover a new method for mastering jQuery Draggable: an advanced technique

Click here for the interactive demo. I'm trying to create a draggable effect for the cover element within the pic-area, but I only want it to be draggable until it completely fills the space without any white gaps. Please have a look at the example b ...

jquerycssjquery-ui-draggable

Tips for utilizing the .clone() method within a loop or for each individual element of an array

Due to certain requirements, I find myself in a situation where I need to customize the invoice template within the software I use. The invoices are generated in HTML format, prompting me to consider utilizing Stylish and Grease Monkey for this task since ...

javascriptjqueryhtml