How to align the img to center

Ionic Framework ionic-v3
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
image

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.

1 Like
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

2 Likes
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.

25 Likes
7

thanks sir for like these supports

8

display: block;
margin: 0 auto;
thats all

5 Likes
9

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

thanks man

3 Likes
10

In my case I used ion-grid and ion-img to center the image.

<ion-grid>
    <ion-row>
        <ion-col size="4" offset="4">
          <ion-img [src]="assets/logo" alt="logo-image"></ion-img>
        </ion-col>
   </ion-row>
</ion-grid>

You can change your code to

<ion-content padding class="myphoto">
 <ion-grid>
    <ion-row>
        <ion-col size="4" offset="4">
          <img src="{{imgSrc}}" id="imgPlacement">
        </ion-col>
  </ion-row>
...
</ion-grid>
</ion-content>
1 Like