title: Central alignment within div with inline display
body: <p>Just a quick question here if i may, I'm very new so go steady on my :)</p>
  
  <p>I'm trying to centralise an inline social sharing div on my site but seem to be struggling. The div is within other div's that are centred but this seems to always float to the left. </p>
  
  <p>Here's the html</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-css lang-css prettyprint-override"><code>#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="share-buttons"&gt;
  
  
  
    &lt;a href="mailto:?Subject=Simple Share 
            Buttons&amp;amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 
            https://auto-glanz.co.uk/how-to-use-a-clay-bar"&gt;
      &lt;img src="email.png" alt="Email" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="http://www.facebook.com/sharer.php?u=https://auto-
            glanz.co.uk/how-to-use-a-clay-bar" target="_blank"&gt;
      &lt;img src="facebook.png" alt="Facebook" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="https://plus.google.com/share?url=https://auto-glanz.co.uk/how-
            to-use-a-clay-bar" target="_blank"&gt;
      &lt;img src="google.png" alt="Google" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="http://www.linkedin.com/shareArticle?
            mini=true&amp;amp;url=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank"&gt;
      &lt;img src="linkedin.png" alt="LinkedIn" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="javascript:void((function()%7Bvar%20e=document.createElement
          ('script');e.
          setAttribute('type','text/javascript');e.setAttribute
          ('charset','UTF-
          8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
          r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"&gt;
      &lt;img src="pinterest.png" alt="Pinterest" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="http://reddit.com/submit?url=https://auto-glanz.co.uk/how-to-
            use-a-clay-bar&amp;amp;title=How to use a clay bar" target="_blank"&gt;
      &lt;img src="reddit.png" alt="Reddit" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="http://www.stumbleupon.com/submit?url=https://auto-
            glanz.co.uk/how-to-use-a-clay-bar&amp;amp;title=How to use a clay bar" target="_blank"&gt;
      &lt;img src="stumbleupon.png" alt="StumbleUpon" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="http://www.tumblr.com/share/link?url=https://auto-
            glanz.co.uk/how-to-use-a-clay-bar&amp;amp;title=How to use a clay bar" target="_blank"&gt;
      &lt;img src="tumblr.png" alt="Tumblr" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="https://twitter.com/share?url=https://auto-glanz.co.uk/how-to-
            use-a-clay-bar&amp;amp;text=Clay%20Bar%20Guide&amp;amp;hashtags=claybarguide" target="_blank"&gt;
      &lt;img src="twitter.png" alt="Twitter" /&gt;
    &lt;/a&gt;
  
  
    &lt;a href="javascript:;" onclick="window.print()"&gt;
      &lt;img src="print.png" alt="Print" /&gt;
    &lt;/a&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can get them to centre relatively easy but they stack on top of each other, although its no doubt an easy task I'm struggling a little.</p>
  
  <p>Thanks for any assistance</p>