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

Question

我想使用我认为应该根据文档工作的方法将 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 有效，但 align-middle 无效，因此图像位于右上角，而不是右中。甚至尝试在列中添加高度属性，但没有好处。这是代码。图像类只影响图像大小并给它们 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-middle 应用于每个图像，但没有成功。

Answer 1

最简单的方法是使用弹性盒对齐工具。 Bootstrap对齐主题有很多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