My Angular project is using ng bootstrap, but I'm facing a styling issue. The content doesn't display in the center, rather it appears in the upper left corner:
I would like the content to be centered and wide under the blue headbar.
While trying to use CSS for this, the only close result I achieved was by manually setting the image width and height with:
style="width: 100%; height: 877px"However, I believe there must be a better solution out there.
Any suggestions on how to achieve this?
UPDATE WITH CODE:
<div class="carouselCont">
<ngb-carousel *ngIf="top10">
<ng-template *ngFor="let film of top10.items" ngbSlide >
<div class="picsum-img-wrapper" (click)="onClick(film)">
<img src="{{film.image}}" alt="Random first slide" style="width: 100%; height: 877px"/>
</div>
<div class="carousel-caption" (click)="onClick(film)">
<h3>{{film.rank}} - {{film.title}}</h3>
<p>{{film.year}}</p>
</div>
</ng-template>
</ngb-carousel>
</div>