Tips for arranging three images in a single row

I have 3 payment logos in my footer that I want to center and align in one row.
Can someone help me with this?

sliki {
  text-align: justify;
}

sliki img {
  display: inline-block;
  width: 75px;
  height: 100px;
  padding: 7px;
  margin-top: -5px;
  float: right;
}

sliki:after {
  content: '';
  display: inline-block;
  width: 100%;
}
<div class="sliki">
  <img src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />
</div>

Check it out on JSFiddle.
Visit my site to see the footer.

csswordpressimagerowinline

Answer №1

Avoid using text-align and float together, as they do not work well together.

When using the class sliki, make sure to write it as .sliki
.

If text-align:justify does not have the desired effect on the last line, consider using text-align-last. Visit <a href="https://jsfiddle.net/5ebL584w/1/" rel="nofollow noreferrer">https://jsfiddle.net/5ebL584w/1/</a> for more information.

.sliki {
  text-align: justify;
  /* and instead :after 
  text-align-last:justify;
  */
}

.sliki img {
  display: inline-block;
  width: 75px;
  height: 100px;
  padding: 7px;
  margin-top: -5px;
  /*float: right;*/
}

.sliki:after {
  content: '';
  display: inline-block;
  width: 100%;
}
<div class="sliki">
  <img src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last

Important Note: It is recommended to use caution with experimental technologies as they may change in future browser versions.

The text-align-last CSS property specifies how the last line of a block or line is aligned, right before a forced line break.

Answer №2

you were missing the '.' in front of your class names in your CSS file, so I added a few class names to your image.

.sliki {
  position: relative;
  text-align: center;
}

.sliki img.credit {
  display: inline-block;
  width: 48px;
  height: 28px;
  padding: 7px;
  margin-top: -5px;
}

img.secure {
  width: 90px;
  height: 35px;
}

sliki:after {
  content: '';
  display: inline-block;
  width: 48px;
  height: 28px;
}
<div class="sliki">

  <img class="secure" src="//ssif1.globalsign.com/SiteSeal/siteSeal/siteSeal/siteSealImage.do?p1=www.prozis.com&amp;p2=SZ90-35&amp;p3=image&amp;p4=en&amp;p5=V0023&amp;p6=S001&amp;p7=https&amp;deterDn=" alt="" />

  <img class="credit" src="//static.sscontent.com/prozis/contents/logotypes/visa_96x56_675_17096.png" alt="" width="48" />
  <img class="credit" src="//static.sscontent.com/prozis/contents/logotypes/mastercard_96x56_676_17097.png" alt="" width="48" height="28" />

</div>

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

Creating a personalized stepper component (using custom icons) using HTML

Seeking guidance on how to achieve a design similar to the image below using HTML and CSS. After conducting extensive research, I have not been able to find a suitable solution. I attempted to modify this answer to fit my requirements, but it did not prod ...

htmlcssangular

When an image is hovered over, the HTML background undergoes a transformation

Essentially: div:hover { body{ background-image:(bg.png); } } This code is conceptual but flawed, yet it effectively illustrates my problem. ...

csshtmlhoverbackground-image

Using React.js to Switch Images When Links are Clicked

Currently, I am in the process of learning React.js for a school project and I'm facing challenges with toggling images alongside active links. Despite extensive searching, I have not been able to find a tutorial that addresses this specific issue. My ...

reactjsimagetogglenavbar

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Getting tags with text containing specific substring by utilizing CSS selectors

Here is the HTML snippet I am working with: <tr bgcolor="#DEDEDE"> <td> <b>OK:Have idea</b> </td> <td> <b>KO:Write code</b> </td> <td> <b>KO:Ru ...

cssseleniumcss-selectorssubstringwebdriver

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected. ...

javascriptcssvue.jslocal-storagequasar-framework

Executing cssnano Using the Command Prompt

Although I'm not an expert in node JS, I have come across cssnano as a JavaScript tool for minifying CSS, which apparently does a more sophisticated job compared to the outdated YUI compressor. My only issue is that I am struggling to understand how t ...

cssnode.jsjarcmdyui

Prepare the writing area for input

My inputs have validation indicators, such as a green tick or red cross, placed at the very right of the input (inside the input). Is there a way to specify the writing space inside an input without restricting the number of characters that can be enter ...

css

Creating a responsive slider in CSS that matches this specific design

Looking to create a responsive sidebar based on this specific design https://i.sstatic.net/YKy6Z.png https://i.sstatic.net/qwTuJ.png Link to design on Figma Key focus is implementing the "< 4/12 >" functionality and ensuring it is respo ...

htmlcssreactjsvue.jsresponsive

Tips for changing a entry with Ajax on WordPress

I apologize if this question has already been addressed. I am new to Ajax and currently attempting to modify a record within the users table of WordPress. Utilizing a for loop to display users, the query is as follows: foreach($user_info as $newu){ ?> ...

phpajaxwordpress

An interactive selection tool for a website's navigation bar

Struggling to implement a dropdown menu for my navbar, none of the CSS methods I've tried seem to work. My current HTML code is as follows... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t ...

cssdrop-down-menunavigationuinavigationbarnavbar

Contrast between JQuery .display/.conceal and CSS view:invisible

I'm working on a way to toggle the visibility of a Div element using JQuery: $("#Progress").hide("fast"); But I want the #Progress div to be hidden by default. <div style="height:30px;margin-top:5px"> <div id="Progress" style="visibil ...

jquerycss

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Below is the javascript code that is relevant <script> $.fn.ready(function() { var source = $('#source').val(); Meme('url1', 'canvas','',''); $('#top-line, #bottom-li ...

javascriptjqueryhtmlcsscanvas

Is there a way to seamlessly transition between images in a slider every 3 seconds using javascript?

<!DOCTYPE html> <html> <head> <title>Hello</title> <meta http-equiv="Content-Type" type="text/html" charset="UTF-8"/> <style> *{margin:0; padding:0;} .mySlides{ position:relative; width:1000px; ...

javascripthtmlcss

Safari browser is experiencing issues with CSS positioning

I am currently working on a website where I am using CSS to position a specific element on the page. The element is absolutely positioned and contained within a relatively positioned parent element. While it displays correctly in Firefox and IE, there seem ...

csshtmlwebkitcss-position

Preserve a string in the form of an image using HTML

I have a string containing the entire HTML code of a webpage. My goal is to convert this string into an image while preserving all HTML formatting. How can I accomplish this using C# and ASP.NET? ...

c#asp.netimage

Achieving a scrolling body with a fixed header in a Vue b-table

Currently, I have implemented a b-table element on a webpage to display data from a database. The table is paginated, but feedback suggests that users prefer all information displayed in a single scrolling view. However, the issue arises when I attempt to ...

htmlcssvue.jsvuejs2bootstrap-vue

What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...

javascriptcssweb-animations

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...

htmlcssbootstrap-5