CODEWITHSUNDEEP
htmlcssimagealignmenttext-align
user8694-03
user8694-03

Reputation: 389

Problems right-aligning an image in a div

I'm working on a frontend project. I'm building this widget thing. I've got the majority of the layout completed. I'm having trouble right-aligning an image inside of a div. I have tried text-align: right, but it doesn't seem to work. I've also tried the bootstrap class text-right, which also did nothing. The specific image here is the right-facing arrow on the right hand side of the widget (the one inside the div with class zg-collapsedSmallMobileRightArrowCol. What am I doing wrong here?

The basic part of the code in question here is:

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

.zg-centerVertically {
  display: flex;
  align-items: center;
}
<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>

.col in this case is the bootstrap4 class of the same name.

Although there is a small code-sample above, the entire code-set is available at the following JSFiddle. You will likely need the entire set of code to figure out what the issue is.

JSFiddle:

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

Upvotes: 0

Views: 1025

Answers (2)

tacoshy
tacoshy

Reputation: 13001

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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114991

Use justify-content:flex-end

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

.zg-centerVertically {
  display: flex;
  align-items: center;
justify-content:flex-end;
}
<div class="col zg-collapsedSmallMobileRightArrowCol zg-centerVertically">
  <img src="https://i.imgur.com/RHSuTQw.png" onclick="advanceReview(1)">
</div>

Upvotes: 1

Related Questions