使用CSS在HTML5中居中按钮

时间:2013-10-22 04:55:32

标签: css html5 button alignment center

我想知道如何在我的网站上集中一组社交媒体按钮。

我之前使用过<center>标签,但切换到了HTML5,所以我在css中拥有其他文本和图像的居中属性。但是,我链接到4个不同的社交媒体网站,他们都使用不同的编码风格来实现按钮。 以下是我的代码


&lt; - FB - &gt; <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>

&lt; - Instagram - &gt; <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>

&lt; - Twitter - &gt; <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>

&lt; - Tumblr - &gt; <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>


是否有简洁的方法将所有这些项目集中在HTML5中?或者我是否必须分别为每个人做?如果是这种情况,我该如何将这些项目集中在一起?

由于

编辑:抱歉,我遗漏了,它们都包含在具有以下属性的容器中 .container { position: static;
height: 700px; width: 780px; top: 50%; left: 50%; margin: 10px;
margin-left: auto; margin-right: auto; }

查看www.lacondesa.com.au/test.html查看

3 个答案:

答案 0 :(得分:15)

尝试将按钮放在带有样式

的div中
text-align:center;
margin:auto;

答案 1 :(得分:2)

在div中指定特定宽度,然后放入margin:auto

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

答案 2 :(得分:1)

这可能有用。试试,

margin : 0px auto;