title: Owl Carousel 2 | center 2 blocks
body: <p>I have 4 blocks. And I want the default 2 to be centered, and 2 more along the edges. In the documentation I did not find anything that could help me solve this problem. Is there any way to solve it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.wrapper-blocks').owlCarousel({
        //center: true,
        items: 4,
        autoWidth: true,
        nav: false,
        rtl:true,
        loop: true,
        margin: 25
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper-blocks {
    width: 1024px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   }
   
  .wrapper-blocks .block {
      width: 286px;
      display: inline-block;
      border-radius: 4px;
      float: left;
      background-color: red;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
      text-align: center;
      padding: 25px 0;
      text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper-blocks owl-carousel"&gt;
    &lt;div class="block"&gt;
        &lt;span&gt;Some text&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="block"&gt;
        &lt;span&gt;Some text&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="block"&gt;
        &lt;span&gt;Some text&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="block"&gt;
        &lt;span&gt;Some text&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>