在轮播项目顶部水平对齐文本和图像

Question

我在这里使用这个包：https://www.npmjs.com/package/ngx-slick-carousel 在我的网站中实现一个轮播，问题是我被 CSS 卡住了。 我不知道怎么做这个

当我尝试时，我得到的是： 顶部的文字未与图像水平对齐。

代码：

CSS：

.nav-btn
  height: 47px
  position: absolute
  width: 26px
  cursor: pointer
  top: 100px !important

.prev-slide.slick-disabled, .next-slide.slick-disabled
  pointer-events: none
  opacity: 0.2

.prev-slide
  background: url(/src/assets/icons/nav-arrow-left.svg) no-repeat scroll 0 0
  left: -33px

.next-slide
  background: url(/src/assets/icons/nav-arrow-right.svg) no-repeat scroll -24px 0px
  right: -33px

.prev-slide:hover
  background-position: 0px -53px

.next-slide:hover
  background-position: -24px -53px

img
  border-radius: 30px

.slick-slide
  position: relative

.slide
  margin: 0px 100px 0px 100px
  padding: 0px 0px 0px 0px

.slick-arrow

HTML：

<ngx-slick-carousel class="carousel"
                    #slickModal="slick-carousel"
                    [config]="slideConfig"
                    (init)="slickInit($event)"
                    (breakpoint)="breakpoint($event)"
                    (afterChange)="afterChange($event)"
                    (beforeChange)="beforeChange($event)">
  <div ngxSlickItem *ngFor="let slide of slides;" class="slide">
    <h2><img   src="image.jpg" alt="" src="assets/img/Icone_Carbet_Krik_Koko_Village.svg" width="15%"/> {{ slide.title }} </h2>
    <img src="{{ slide.img }}" alt="" width="100%" >
    <h3>{{ slide.capacity }} </h3>
  </div>
</ngx-slick-carousel>
<button class="btn-next" (click)="next()">next</button>
<button class="btn-prev" (click)="prev()">prev</button>

有人可以帮帮我吗？

Answer 1

你可以试试这个

<div ngxSlickItem *ngFor="let slide of slides;" class="slide">
  <div class="slick-header">
    <img   src="image.jpg" alt="" src="assets/img/Icone_Carbet_Krik_Koko_Village.svg" width="15%"/> 
    <h2>{{ slide.title }}</h2>
  </div>
  <img src="{{ slide.img }}" alt="" width="100%" >
  <h3>{{ slide.capacity }} </h3>
</div>

而不是这个

<div ngxSlickItem *ngFor="let slide of slides;" class="slide">
  <h2><img   src="image.jpg" alt="" src="assets/img/Icone_Carbet_Krik_Koko_Village.svg" width="15%"/> {{ slide.title }} </h2>
  <img src="{{ slide.img }}" alt="" width="100%" >
  <h3>{{ slide.capacity }} </h3>
</div>

在你的 CSS 类中添加 slick-header。

.slick-header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }