div中的居中按钮
问题描述:
我似乎无法居中社交媒体按钮。现在全社会共享阶层是空的。我应该如何将它们置于css中? (它的麻烦,提供一个小提琴)div中的居中按钮
的HTML代码
<div class="col span-2-of-2 all-soc-share">
<div class="soc-share">
<!--FB SHARE-->
<div class="fb-share-button" data-href="http://example.com" data-layout="button_count"></div>
</div>
<div class="soc-share">
<!--Twitter SHARE-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com" data-text="Dummy text" data-size="large">Tweet</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>
</div>
<div class="soc-share">
<!--Draugiem SHARE-->
<script type="text/javascript" src="//www.draugiem.lv/api/api.js"></script>
<div id="draugiemLike"></div>
<script type="text/javascript">
var p = {
link:"example.com",
text:"Dummy text ",
popup:true
};
new DApi.Like(p).append('draugiemLike');
</script>
</div>
</div>
的CSS
.soc-share{
float: left;
margin-right: 30px;
}
答
不确定为什么你有浮动在那里。试试这个:
.soc-share{
display: inline-block;
margin-right: 30px;
}
.all-soc-share{
width: 100%;
text-align: center;
}
而且这里有一个小提琴: https://jsfiddle.net/qaq9r4fs/
答
你能做到这一点的纯CSS通过提供
.theclasstocenter {
margin-left:auto;
}
或者你可以下载引导程序并将这些社交按钮与自定义类 “文本中心“。
如果一个小提琴是一件麻烦事,考虑[可运行的代码片段](http://blog.*.com/2014/09/introducing-可运行的JavaScript-CSS-和HTML的代码段/) – ethorn10