0

I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!

 <ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>


img {
    width: 50vw;
    height: 80vh;
    margin-left: auto;
    margin-right: auto;
}
st123
  • 246
  • 3
  • 14
  • 1
    by this way, your image will stretch, but if this is okay for you and you only want to center it, then make the image display block, that's it, rest you have applied already – Atul Rajput Oct 12 '20 at 07:16
  • @AtulRajput how can I avoid stretching? – st123 Oct 12 '20 at 07:24
  • 1
    there are 2 ways to avoid stretching, 1st and best is don't give height and width to images, lets keep it as it is, the original size of image, 2nd is if you want to give it height and width then give it object-fit: cover – Atul Rajput Oct 12 '20 at 07:26

1 Answers1

1

Wrap your carousel inside a div with display flex. Something like this.

<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
  <ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="getImageLink(image)" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>
</div>

The css style of carouselCont class applied shall be

.carouselCont{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    height:100vh;
}

This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)

Thanks.

Obaid
  • 2,563
  • 17
  • 15