Ich frage mich, wie ich eine Gruppe von Social-Media-Schaltflächen auf meiner Website zentrieren kann.Zentrieren von Schaltflächen in HTML5 mit CSS
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/[email protected]); 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
Arbeitete perfekt! Vielen Dank – dweeman
Hat 'margin: auto;' wirklich brauchen? – smartmouse
Die Zeile 'margin: auto' zentriert das div. –