Question

如果我可以，这里只是一个简单的问题，我很新，所以请坚持下去：）

我正在尝试在我的网站上集中内联社交分享div，但似乎正在挣扎。 div位于其他div的中心位置，但这似乎总是向左浮动。

这是html

#share-buttons img {
  width: 35px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
  text-align: center;
}

<div id="share-buttons">



  <a href="mailto:?Subject=Simple Share 
          Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 
          https://auto-glanz.co.uk/how-to-use-a-clay-bar">
    <img src="email.png" alt="Email" />
  </a>


  <a href="http://www.facebook.com/sharer.php?u=https://auto-
          glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="facebook.png" alt="Facebook" />
  </a>


  <a href="https://plus.google.com/share?url=https://auto-glanz.co.uk/how-
          to-use-a-clay-bar" target="_blank">
    <img src="google.png" alt="Google" />
  </a>


  <a href="http://www.linkedin.com/shareArticle?
          mini=true&amp;url=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="linkedin.png" alt="LinkedIn" />
  </a>


  <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)());">
    <img src="pinterest.png" alt="Pinterest" />
  </a>


  <a href="http://reddit.com/submit?url=https://auto-glanz.co.uk/how-to-
          use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="reddit.png" alt="Reddit" />
  </a>


  <a href="http://www.stumbleupon.com/submit?url=https://auto-
          glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="stumbleupon.png" alt="StumbleUpon" />
  </a>


  <a href="http://www.tumblr.com/share/link?url=https://auto-
          glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="tumblr.png" alt="Tumblr" />
  </a>


  <a href="https://twitter.com/share?url=https://auto-glanz.co.uk/how-to-
          use-a-clay-bar&amp;text=Clay%20Bar%20Guide&amp;hashtags=claybarguide" target="_blank">
    <img src="twitter.png" alt="Twitter" />
  </a>


  <a href="javascript:;" onclick="window.print()">
    <img src="print.png" alt="Print" />
  </a>


</div>

我可以让他们相对轻松地居中，但他们叠加在一起，虽然毫无疑问这是一项轻松的任务，我正在努力。

感谢您的帮助

Answer 1

#share-buttons{text-align:center;}

只需添加此

Answer 2

尝试将display:flex属性添加到包装器元素。

#share-buttons {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  align-items: center;
  -webkit-align-items: center;
  /* Safari 6.1+ */
}

＆＃13;

#share-buttons img {
  width: 35px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
  text-align: center;
}

#share-buttons {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  /* Safari 6.1+ */
  align-items: center;
  -webkit-align-items: center;
  /* Safari 6.1+ */
}

＆＃13;

<div id="share-buttons">
  <a href="mailto:?Subject=Simple Share 
  Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 
      https://auto-glanz.co.uk/how-to-use-a-clay-bar">
    <img src="https://simplesharebuttons.com/images/somacro/email.png" alt="Email" />
  </a>


  <a href="http://www.facebook.com/sharer.php?u=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
  </a>


  <a href="https://plus.google.com/share?url=https://auto-glanz.co.uk/how-
      to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
  </a>


  <a href="http://www.linkedin.com/shareArticle?
      mini=true&amp;url=https://auto-glanz.co.uk/how-to-use-a-clay-bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
  </a>


  <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)());">
    <img src="https://simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" />
  </a>


  <a href="http://reddit.com/submit?url=https://auto-glanz.co.uk/how-to-
      use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" />
  </a>


  <a href="http://www.stumbleupon.com/submit?url=https://auto-
      glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" />
  </a>


  <a href="http://www.tumblr.com/share/link?url=https://auto-
      glanz.co.uk/how-to-use-a-clay-bar&amp;title=How to use a clay bar" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/tumblr.png" alt="Tumblr" />
  </a>


  <a href="https://twitter.com/share?url=https://auto-glanz.co.uk/how-to-
      use-a-clay-bar&amp;text=Clay%20Bar%20Guide&amp;hashtags=claybarguide" target="_blank">
    <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
  </a>


  <a href="javascript:;" onclick="window.print()">
    <img src="https://simplesharebuttons.com/images/somacro/print.png" alt="Print" />
  </a>


</div>

＆＃13;

Answer 3

只需添加以下css：

#share-buttons{
  text-align: center;
}

请查看此链接

https://jsfiddle.net/amzdLxc4/2/

div内部对齐，内联显示

3 个答案: