[SOLVED] How to right-align an image in a div

How to right-align an image in a div

I want to right-align an image within a div. I tried text-align: right as well as the bootstrap class text-right. Neither of these worked. The img element is inside the div with the class image in the code below.

.image {
  border: 1px solid red;
}

.v-align {
  display: flex;
  align-items: center;
}

<div class="col image v-align">
  <img src="default.png"">
</div>

.col is a bootstrap 4 class.

The full code-set is available at the following JSFiddle.

JSFiddle:

https://jsfiddle.net/meawr0tn/1/

Solution

display: flex; is preventing the use of text-align: right;. You can use justify-content: flex-end; to align that arrow to the right. add: .zg-centerVertically:last-child { justify-content: flex-end; } to manipulate only the last flex item which would work then in your fiddle.

.zg-collapsedSmallMobileRightArrowCol {
  border: 1px solid red;
}

.zg-centerVertically {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* aligns the picture of your last flex item to the right sides */
.zg-centerVertically:last-child {
  justify-content: flex-end;
}

/* adds a margin to the right side of the picture of the last flex item */
.zg-centerVertically img:last-child {
  margin-right: 15px;
}

<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>