Prime NG 轮播水平对齐项目

Question

我有一个 Prime NG 轮播，以徽标（PNG）作为元素。这些标志的高度不一样。是否可以将这些徽标水平居中。 Prime NG 轮播的行为是项目水平位于顶部，但我想将它们居中于中间。

我尝试将以下CSS分别应用于p-carousel和img：

container {
    display: flex;
    align-items: center; 
   padding-left: 10px;
  }
.image {
    margin-left: 15px ;
    margin-right: 15px;
  }

然而没有喜悦

Answer 1

要将徽标在 PrimeNG 轮播中垂直居中，您需要确保轮播项目本身正确使用 Flexbox 属性。

1)CSS调整

.p-carousel .p-carousel-item {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    height: 100%; /* Ensure items take full height */
}

2）图像样式

.image {
    margin-left: 15px;
    margin-right: 15px;
    max-height: 100%; /* Ensure the image scales while maintaining aspect ratio */
}

3)HTML 示例

<p-carousel>
    <ng-template pTemplate="item" let-item>
        <div class="carousel-item">
            <img [src]="item.logo" class="image" alt="Logo" />
        </div>
    </ng-template>
</p-carousel>