title: Align vertical and horizontally an image in Owl Carousel arrow slider
body: <p>I have an owl carousel setup in my page and I made a custom arrow beside my slider so it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/gCfM0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gCfM0.png" alt="enter image description here"></a></p>
  
  <p>What I want is to align vertically middle the arrows beside and the left arrow should be align left and the right arrow is align right. I want to do it responsively but I dont know how. Can you help me?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="col-sm-1" style="border: 1px solid #ccc"&gt;
          &lt;div class="owl-carousel-arrows"&gt;
              &lt;div class="prev"&gt;
                  &lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;arrow-green-left.png" class="img-responsive" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-10"&gt;
          &lt;div class="owl-carousel"&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant1.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant2.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant3.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant4.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant5.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant6.jpg"&gt;&lt;/div&gt;
              &lt;div class="item"&gt;&lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;plant7.jpg"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-1" style="border: 1px solid #ccc"&gt;
          &lt;div class="owl-carousel-arrows"&gt;
              &lt;div class="next"&gt;
                  &lt;img src="&lt;?php echo HTTP_HOME_IMAGE; ?&gt;arrow-green-right.png" class="img-responsive" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you give me some idea how can I do this? </p>