尝试将图像对齐到引导程序中列的右侧中间答案

【问题标题】：Trying to align an image to the right middle of a column in bootstrap尝试将图像对齐到引导程序中列的右侧中间
【发布时间】：2018-05-31 22:14:43
【问题描述】：

我正在尝试将引导列中的图像向右对齐，并让文本在左侧环绕它，如下所示：https://codepen.io/freeCodeCamp/full/YqLyXB

我整天都在研究 flexbox 和垂直对齐，而不是做我的工作（哎呀），我觉得是时候问问专家了。这是我的样子： https://codepen.io/Seaplush/pen/rKVLmX

.col2 img{
max-width: 100%;
  height: 50%;
  float: right;
}


  .col2{
  background-color: #cccccc;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
 }

感谢您的帮助，这是我第一次尝试网站，如果浏览起来有点混乱，非常抱歉；）

【问题讨论】：

标签： css image bootstrap-4 css-float vertical-alignment

【解决方案1】：

您可以使用引导列。只需阅读并了解有关 Bootstrap 网格的更多信息。

请阅读以下链接：

https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.0/layout/overview/

【讨论】：

谢谢，我重新阅读了网格布局文档并意识到修复是多么简单，只需将图像放在文本旁边的自己的列中，它看起来好多了。

【解决方案2】：

如果你使用引导程序，为什么不使用引导程序网格布局呢？

但是如果你尝试使用弹性盒子，这是一些提示......

你应该设置文字和图片的宽度...
将这两个元素的父元素设置为 flex，并设置对齐内容。

示例：

.parent{ display:flex; align-content:space-around; }

【讨论】：