Trying to align an image to the right middle of a column in bootstrap

问题

I'm trying to align an image in my bootstrap column to the right and have the text wrap around it on the left like this: https://codepen.io/freeCodeCamp/full/YqLyXB

I've been researching flexbox and vertical align all day instead of doing my job (woops) and feel like it's time to just ask the experts. Here's what mine looks like: 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;
 }

Thanks for the help, this is my first website attempt so sorry if it's a bit of a mess to look through ;)

回答1:

You can use the bootstrap columns. Just read and understand a bit more about Bootstrap grid.

Please, read the links bellow:

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

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

回答2:

If you use bootstrap, why you not use bootstrap grid layout instead?

But if you try to use flex box instead, this is some hint...

1. you should set width for the text and the image...

2. set the parent of those 2 element to flex, and set the align-content.

example:

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

来源：https://stackoverflow.com/questions/50625808/trying-to-align-an-image-to-the-right-middle-of-a-column-in-bootstrap