Slick image alignment

jQuery Plugin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
  <div>
    <div>
      <img src="http://placehold.it/150x300?text=1">
      <p>text</p>
    </div>
  </div>
  
  <div>
    <div>
      <img src="http://placehold.it/550x300?text=2">
      <p>text</p>
    </div>
  </div>
  
  <div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
      <p>text</p>
    </div>
  </div>
  
  <div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
      <p>text</p>
    </div>
  </div>
  
  <div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=7">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=8">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=9">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=10">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=11">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=12">
  </div>
</section>

CSS

html,
   body {
     margin: 0;
     padding: 0;
   }
   
   * {
     box-sizing: border-box;
   }
   
   .slider {
     margin: 50px;
   }
   
   .slick-slide {
     margin: 0px 10px;
    width: 230px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 220px;
   }
   
   .slick-slide img {
     max-width: 200px;
     max-height: 200px;
   }
   
   .slick-prev:before,
   .slick-next:before {
     color: blue;
   }
   
   @media screen and (max-width: 768px) {
     .slick-dots {
       position: initial !important;
     }
   }

JavaScript

$(".regular").slick({
  dots: true,
  infinite: false,
  slidesToShow: 7,
  slidesToScroll: 6,
  responsive: [{
    breakpoint: 1200,
    settings: {
      slidesToShow: 5,
      slidesToScroll: 4
    }
  }, {
    breakpoint: 992,
    settings: {
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      arrows: false,
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }]
});