角度/引导轮播中的图片未居中

问题描述

我一直试图将图像放在页面的中心。我尝试证明中心的内容合理，并使中心的项目对齐，但均无济于事。保证金自动也不起作用（通常有效）。我尝试为包含图像的div设置相似的样式，但仍然没有变化。我知道我可以添加页边距，但是在设置页面背景颜色时会引起问题，因此我想使用其他解决方案。让我知道您是否有任何想法，谢谢！

 <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;
}

解决方法

将旋转木马包裹在显示为 flex 的div中。像这样的东西。

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

carouselCont 类的css样式应为

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

通过这种方式，您的旋转木马将水平和垂直与屏幕中心对齐。无需给vh / vw或边距提供图像本身，仅是为了使旋转木马居中对齐（这样一来，您的图像将在不同的屏幕分辨率下被拉伸/缩小）

谢谢。