title: Centering a div which contains images
body: <p>I'm trying to centre images but failed to do so. I added margin: auto; to images but not working. When removing float: left; from carousel, structure gets messed up.</p>
  
  <p>How can I centre the images?</p>
  
  <p>Thanks</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function ()
              {
                  var showing_default = true;
                  var did_scroll = false;
  
                  $(window).on("scroll", function (e)
                  {
                      did_scroll = true;
                  });
  
                  window.setInterval(function ()
                  {
                      if (did_scroll)
                      {
                          did_scroll = false;
  
                          if (showing_default &amp;&amp; $(document).scrollTop() &gt;= 100)
                          {
                              showing_default = false;
                              $("#header").css('position', 'fixed');
                              $("#default").stop().hide();
                              $("#sticky").fadeIn(500);
                          }
                          else if (! showing_default &amp;&amp; $(document).scrollTop() &lt; 100)
                          {
                              showing_default = true;
                              $("#sticky").stop().hide();
                              $("#default").fadeIn(500);
                              $("#header").css('position', 'fixed');
                          }
                      }
                  }, 250);
              });
          &lt;/script&gt;
  
          &lt;style&gt;
              *
              {
                  margin: 0px;
                  padding: 0px;
              }
              #header, #default, #carousel, #body, #footer
              {
                  display: block;
                  width: 100%;
              }
              /* --- HEADER ------------------------------------------------------------------ */
              #header, #default, #sticky
              {
                  background: #EEEEEE;
              }
              #header
              {
                  position: fixed;
                  z-index: 100;
                  border-bottom: 1px solid #CCCCCC;
              }
              #default
              {
                  height: 100px;
              }
              #sticky
              {
                  display: none;
                  height: 50px;
              }
              /* --- CAROUSEL ---------------------------------------------------------------- */
              #carousel
              {
                  margin-top: 101px;
                  float: left;
                  height: 400px;
                  background: #FFFFFF;
              }
              #images
              {
                  position: absolute;
              }
              .image
              {
                  display: none;
                  position: absolute;
                  width: 900px;
                  height: 400px;
              }
              .image img
              {
                  width: 900px;
                  height: 400px;
              }
              .first
              {
                  display: block;
              }
              /* --- BODY -------------------------------------------------------------------- */
              #body
              {
                  background: #EEEEEE;
              }
              /* --- FOOTER ------------------------------------------------------------------ */
              #footer
              {
                  background: #DDDDDD;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="header"&gt;
              &lt;div id="default"&gt;DEFAULT HEADER&lt;/div&gt;
              &lt;div id="sticky"&gt;STICKY HEADER&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="carousel"&gt;
              &lt;div id="images"&gt;
                  &lt;div class="image first"&gt;&lt;img src="images/1.jpg" /&gt;&lt;/div&gt;
                  &lt;div class="image"&gt;&lt;img src="images/2.jpg" /&gt;&lt;/div&gt;
                  &lt;div class="image"&gt;&lt;img src="images/3.jpg" /&gt;&lt;/div&gt;
                  &lt;div class="image"&gt;&lt;img src="images/4.jpg" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="body"&gt;TOP&lt;br /&gt;&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;BODY&lt;br /&gt;&lt;br /&gt;BOTTOM&lt;/div&gt;
  
          &lt;div id="footer"&gt;FOOTER&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>