中央對齊

Question

這裏只是一個簡單的問題，如果可以的話，我非常新，所以走得穩我:)

我想在我的網站集中內嵌社交共享格但似乎在掙扎。 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

只需添加下面的CSS：

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

請看看這個鏈接

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

Answer 3

嘗試將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+ */ 
} 

#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+ */ 
 
}

<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>