Блог

В моем приложении Angular есть карусель начальной загрузки. Я добавил теги к изображениям, чтобы, когда кто-то нажимает на изображение, оно перенаправлялось на определенную страницу. Я не могу выровнять изображение по центру окна (за исключением случаев, когда я изменяю заполнение, что вызовет проблемы, если окно вообще свернуто. Кроме того, поскольку я добавил тег a, я также не могу установить цвет фона div, содержащего изображение (он работал нормально до того, как я добавил ссылку).Я опубликую свой HTML- и CSS-код. Буду признателен за любую помощь, спасибо!

 
<ngb-carousel [showNavigationArrows]="true" 
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
 [interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <a class="nav-link" routerLink="/blog/1">
      <img src="../../assets/img/actual.png" alt="Angular Carousel 1"></a>
    </div>
    <div class="carousel-caption">
      <h3>Title Goes Here</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <a class="nav-link" routerLink="/blog/2">
      <img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2"></a>
    </div>
    <div class="carousel-caption">
      <h3>Title Goes Here</h3>
      <p>Consectetur tortor volutpat pretium.</p>
    </div>
  </ng-template>
</ngb-carousel>
  

 a.nav-link {
  background-color: #361833 !important;
  margin-left: auto !important;
  margin-right: auto !important;

}

a {
  background-color: #361833 !important;

}
 
 div {
   background-color: #361833 !important;
   color: white;
   font-size: 20px;
   font-family: orpheuspro, serif;
   font-style: normal; 
   font-weight: 600 !important;
   /* margin-left: auto !important;
   margin-right: auto !important;
    */
}  

img {
  background-color: #361833 !important;
  display: flex;
  padding-top: 30px ;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 650px;
  height: 450px;
  margin-left: auto !important;
  margin-right: auto !important;
}



h3 {
  background-color: transparent !important;
}

p {
  background-color: transparent !important;
}


ol {
  background-color: transparent !important;
}

li {
  background-color: transparent !important;
}

#ngb-slide-4 {
  background-color: transparent !important;
}


.carousel-caption {
  background-color:transparent !important;
}

.picsum-img-wrapper {
  background-color: #361833 !important;
  /* justify-content: center !important;
  text-align: center !important; */

  /* margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 300px; */
}

div.carousel-inner {
  background-color: #361833 !important;
}
  

Я попытался установить поля влево и вправо на авто, но без изменений. Выравнивание изображения / div, содержащего изображение, также, похоже, не сработало.