How to align the img to center


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

Result after takephoto


but you have scss issue

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


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



Hi xr0master,

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


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


So the scss is a little off.

  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.


thanks sir for like these supports


display: block;
margin: 0 auto;
thats all