如何在引导列的右中对齐图像

Question

我想在bootstrap列中使用我认为应该基于文档的方式将4个图像对齐到水平的右侧和垂直的中间。阅读文档，但它似乎没有说明当您想要中间垂直对齐和右水平对齐时该做什么。认为文本和图像应该是相同的，因为它们都是内联的，但也可能不是。

https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment https://getbootstrap.com/docs/4.0/utilities/vertical-align/

我还看到了这个，Trying to align an image to the right middle of a column in bootstrap

但这和我的情况不太一样，因为它涉及浮动文本。

text-right行得通，但对齐居中不行，所以图像在右上角，而不是在右中。甚至尝试向列中添加一个height属性，但效果不佳。这是代码。图像类仅影响图像大小，并为其提供2px的右边界，因此它们不会影响图像大小。

<div class="col-12 col-sm-3 align-middle text-right" style="height:200px">
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
  <img src="images/twitter.png" class="socialImg marginSocial" />
</div>

我甚至尝试对每个图像应用align-didn，但都不起作用。

Answer 1

最简单的方法是使用flexbox对齐实用程序。有许多关于引导对齐主题的other Q&A。

<div class="container py-2">
    <div class="row">
        <div class="col-12 col-sm-3 d-flex align-items-center justify-content-end" style="height:200px">
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
            <img src="//placehold.it/30" class="socialImg marginSocial" />
        </div>
    </div>
</div>

https://codeply.com/p/UXNRJ1oaTp