What is the best way to align images to the right while also centering them in relation to each other?

Here is the current code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <div class="col-sm bg-primary">
      One
    </div>
    <div class="col-sm bg-warning">
      Two
    </div>
    <div class="col-sm bg-light text-right">
        <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F0%2F0d%2FRed_blue_circle.svg%2F1200px-Red_blue_circle.svg.png&f=1" style="max-height: 18px; width: 25px">
      
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm bg-primary">
      One
    </div>
    <div class="col-sm bg-warning">
      Two
    </div>
    <div class="col-sm bg-light text-right">
      <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F0%2F0d%2FRed_blue_circle.svg%2F1200px-Red_blue_circle.svg.png&f=1" style="max-height: 18px; width: auto">
    </div>
  </div>
  
</div>

The current layout displays the images aligned to the right of the 3rd column. However, the requirement is to align the images relative to their center like shown in this example: https://i.sstatic.net/r7eLq.png

htmlcssbootstrap-4

Answer №1

If you have knowledge of all the image widths, you can enclose each image in a div with the width set to the maximum image width and align it to the center. To move them to the right, you can include d-flex and justify-content-end to the parent column

For instance 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-sm bg-primary">
      One
    </div>
    <div class="col-sm bg-warning">
      Two
    </div>
    <div class="col-sm bg-light d-flex justify-content-end ">
      <div style="width: 25px;" class="text-center">
        <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F0%2F0d%2FRed_blue_circle.svg%2F1200px-Red_blue_circle.svg.png&f=1" style="max-height: 18px; width: 25px">
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm bg-primary">
      One
    </div>
    <div class="col-sm bg-warning">
      Two
    </div>
    <div class="col-sm bg-light d-flex justify-content-end">
      <div style="width: 25px;" class="text-center">
        <img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F0%2F0d%2FRed_blue_circle.svg%2F1200px-Red_blue_circle.svg.png&f=1" style="max-height: 18px; width: auto">
      </div>
    </div>
  </div>

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

Make the background image within a button stretch to completely cover the button

I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space i ...

htmlcss

What is the best method for storing a variety of HTML form data in a database?

I am currently working on developing a survey system that includes the feature of creating various types of questions through a drag & drop HTML form builder. The idea is for a client to create their survey form, which will then be stored in a database tab ...

phphtmlmysqlformszend-framework

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

htmlcssresponsive-designadaptive-design

Ways to specify the specific option within a select field

Here is my question: <select name="currency" id="currency"> <option value="AUD"&lgt;AUD</option> <option value="BDT"&lgt;BDT</option> <option value="EUR"&lgt;EUR</option> & ...

javascripthtmljqueryhtml-select

Styling Easy-Autocomplete with jQuery

I am currently working on integrating autocomplete functionality using the jquery easy-autocomplete plugin npm install --save easy-autocomplete I am facing two issues related to its styling. The results are being displayed in a bulleted list format. I ...

jquerycssbootstrap-4laravel-8easyautocomplete

Tips for dynamically filling HTML content with Ajax calls

I'm currently in the process of creating a website for my semester project, and I need to dynamically populate HTML content from an AJAX response. The data I'm receiving is related to posts from a database, but I specifically need to display 5 jo ...

jqueryhtmlajax

HTML table designed to work in both Internet Explorer and Firefox, with a header and footer that remain fixed while allowing vertical and

I am in need of a highly functional HTML super-table. I am open to using jQuery or any other JavaScript library, regardless of potential drawbacks, as long as it meets the following requirements. It must support: Compatibility with at least IE8 and the ...

htmlhtml-table

The Angular application is currently building successfully, however when launched it displays a blank white screen. Upon checking the network tab

Seeking assistance as I am encountering a blank screen in the browser after debugging my Angular 15 application. The workspace does not exhibit any issues or errors. However, upon exploring the Network tab in DevTools, I observed that config.js, styles.css ...

jsonangularbootstrap-4http-status-code-404bootstrap-5

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

javascriptcssmagento-1.9minify

What is the best way to align a circular image using CSS?

Having an issue with positioning a rounded image to the left of a webpage. Despite trying various methods, the image ends up flat with its corners missing and positioned on the right side instead of the intended left. I've scoured the internet for ans ...

htmlcss

Align a single item to the right in PrimeNG p-menubar

I am currently utilizing PrimeNG 8.1.1 and I am looking for a way to align one of the items to the right side (specifically the submenu options of logout and profile). Does anyone have any suggestions? this._menuItems = [ { labe ...

cssangularprimeng

How to trigger a JavaScript function using a button click

I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...

javascripthtmlcss

Conceal and reveal a list on page load with jQuery

Is there a way to automatically display this listing collapsed without making changes to the HTML structure? I would like all folders in the tree to be collapsed. Instead of the initial display: https://i.stack.imgur.com/cDw4s.png I prefer it to look li ...

htmljquery

Creating a CSS background that adjusts to fit any screen resolution

Hey there, I'm a beginner to all of this. I want my background image to adjust to fit any web browser resolution, regardless of the size. So far, I've come across this nifty little trick: html { background: url(images/bg.jpg) no-repeat center ...

cssbrowserbackgroundresolutionadjustment

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

Working with Angular 9 and ngx-toastr has presented me with an interesting challenge. I am tasked with creating custom toast styles that differ significantly from the default ones provided by toastr. Each toast in the set will have unique border colors, f ...

cssangularuser-interfaceangular9toastr

Adapting actions when radio button is activated (while keeping HTML structure intact)

Hey friends, I'm looking for assistance on applying a style to (span class = "ui-radiobutton-icon") when the radio button is true. Can anyone help me out? Thank you! Specifics: Must be done within the HTML structure <div class="ui-radiobutton ui ...

csssass

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

javascripthtmlioscsstransform

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

javascriptphphtmlajaxwordpress

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss