title: Align horizontally text and image at top of carousel items
body: <p>I'm using this package here : <a href="https://www.npmjs.com/package/ngx-slick-carousel" rel="nofollow noreferrer">https://www.npmjs.com/package/ngx-slick-carousel</a> to implement a carousel in my web site, the thing is that i'm stuck with the css.
  I don't know how to make this
  <a href="https://i.stack.imgur.com/NUAB0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NUAB0.png" alt="enter image description here" /></a></p>
  <p>What i get when i try is this :
  <a href="https://i.stack.imgur.com/yz4Ka.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yz4Ka.jpg" alt="enter image description here" /></a>
  The text at the top is not align horizontaly with the image.</p>
  <p><strong>CODE:</strong></p>
  <p><strong>CSS:</strong></p>
  <pre><code>.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
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;ngx-slick-carousel class=&quot;carousel&quot;
                      #slickModal=&quot;slick-carousel&quot;
                      [config]=&quot;slideConfig&quot;
                      (init)=&quot;slickInit($event)&quot;
                      (breakpoint)=&quot;breakpoint($event)&quot;
                      (afterChange)=&quot;afterChange($event)&quot;
                      (beforeChange)=&quot;beforeChange($event)&quot;&gt;
    &lt;div ngxSlickItem *ngFor=&quot;let slide of slides;&quot; class=&quot;slide&quot;&gt;
      &lt;h2&gt;&lt;img   src=&quot;image.jpg&quot; alt=&quot;&quot; src=&quot;assets/img/Icone_Carbet_Krik_Koko_Village.svg&quot; width=&quot;15%&quot;/&gt; {{ slide.title }} &lt;/h2&gt;
      &lt;img src=&quot;{{ slide.img }}&quot; alt=&quot;&quot; width=&quot;100%&quot; &gt;
      &lt;h3&gt;{{ slide.capacity }} &lt;/h3&gt;
    &lt;/div&gt;
  &lt;/ngx-slick-carousel&gt;
  &lt;button class=&quot;btn-next&quot; (click)=&quot;next()&quot;&gt;next&lt;/button&gt;
  &lt;button class=&quot;btn-prev&quot; (click)=&quot;prev()&quot;&gt;prev&lt;/button&gt;
  </code></pre>
  <p>Anyone can help me please ?</p>