Zentrieren von Schaltflächen in HTML5 mit CSS

Question

Ich frage mich, wie ich eine Gruppe von Social-Media-Schaltflächen auf meiner Website zentrieren kann.

Ich zuvor die <center> Tags verwendet, aber zu HTML5 gewechselt, so habe ich die Zentrierungseigenschaft für meine anderen Text und Bilder in der CSS. Ich habe jedoch Links zu 4 verschiedenen Social-Media-Sites, die alle verschiedene Codierungsstile verwenden, um den Button zu implementieren. Der Nachfolger ist mein Code

---

< - FB -> <div class="fb-like" data-href="https://www.facebook.com/pages/La-Condesa/242967619184322" data-width="20" data-height="20" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="false" data-send="false"></div>

< - Instagram -> <style>.ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {.ig-b-32 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-32@2x.png); background-size: 60px 178px; } }</style><br><br>

<a href="http://instagram.com/lacondesafitzroy?ref=badge" class="ig-b- ig-b-32">img src="//badges.instagram.com/static/images/ig-badge-32.png" alt="Instagram" /></a>

< - Twitter - > <a href="https://twitter.com/LaaCondesa" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @LaaCondesa</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

< - Tumblr -><iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="114" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog=LaaCondesa&color_scheme=light"></iframe>

---

Gibt es eine prägnante Art und Weise all diese Elemente in HTML5 Zentrieren? Oder muss ich es separat für jeden tun? Wenn dies der Fall ist, wie kann ich diese Elemente zentrieren?

Dank

EDIT: Sorry, ich weggelassen, sie sind alle mit den folgenden Eigenschaften .container { position: static;
height: 700px; width: 780px; top: 50%; left: 50%; margin: 10px;
margin-left: auto; margin-right: auto; }

prüfen in einem Behälter enthalten www.lacondesa.com.au/test.html

zu sehen aus

Answer 1

Versuchen Sie, die Tasten in einem div mit dem Stil

text-align:center; 
margin:auto; 

Answer 2

geben bestimmten Breite innerhalb eines div setzen und setzen dann margin:auto.

div 
{ 
width://your width; 
margin:auto; 
} 

Answer 3

kann dies funktionieren. Versuchen Sie,

margin : 0px auto;