How to align the img to center


#1

I am implement native camera, and test with android emulator. After it snap the photo, the picture always appear in the left with small size.
I try to adjust with scss and set in HTML, but still failed.
Can anybody advise?

Code in scss

.myphoto {
ion-content img {
height: 70vh !important;
width: auto !important;
align-items: center;
}
}

Code in HTML

<ion-content padding class="myphoto">
  <img src="{{imgSrc}}" id="imgPlacement"  style="align-items: center">
    <button block (click)="takePhoto()">
    <ion-icon name="camera"></ion-icon>
    Take Photo
  </button>

Result after takephoto


#2

TL;DR;
but you have scss issue

.myphoto {
img {
height: 70vh !important;
width: auto !important;
align-items: center;
}
}

#3

May I know what do you mean TL;DR; and what scss issue that is? how can I fix that issue?

Thanks.


#4

Hi xr0master,

Thanks for the advise. It fix my problem, but I am not applying tl, td, just modify the scss.


#5

I believe TL;DR = Too long, didn’t read


#6

So the scss is a little off.

img{
  height: 70vh;
  width: auto;
  margin: auto;
  display: block;
}

Since images are displayed inline, we need to change their display to block and we can set their margin to auto.