title: Move an image down
body: <p>I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>.carousel .item {
    height: 900px;
    background-color: #777;
  }
  .carousel-inner &gt; .item &gt; img {
      display: block;
      margin-left: auto;
      margin-right: auto
  }
  </code></pre>
  
  <p>Here is a URL to the webpage in question to show you that the image is too high: <a href="http://www.canninginc.co.nz/canluciddream/screenshots.html" rel="nofollow">http://www.canninginc.co.nz/canluciddream/screenshots.html</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Ok, I have edited the code by changing the:</p>
  
  <pre><code>margin-top: 50px;
  </code></pre>
  
  <p>I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?</p>