如何将图像向右对齐，又如何使它们相对居中对齐？

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>

您可以看到图像在第三列的右边，这就是我想要的。但是我还需要使图像相对于其中心对齐，如下所示：

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>