Как выровнять изображения вправо, а также выровнять их по центру относительно друг друга?

Question

У меня сейчас есть это:

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

Как вы можете видеть, изображения находятся справа от 3-го столбца, что я и хочу.Но мне также нужно, чтобы изображения были выровнены относительно их центра, например:

Answer 1

Если вы знаете все ширины изображения, вы можете обернуть каждое изображение в div с шириной, установленной на максимальную ширину изображения и текстовый центр.Чтобы перетащить их вправо, вы можете добавить d-flex и justify-content-end в родительский столбец

Например

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