Question

我似乎无法集中社交媒体按钮。现在全社会分享班是空的。我应该如何将它们置于css中心？（这是一个提供小提琴的麻烦）

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

Answer 1

不确定为什么你的浮子留在那里。试试这个：

.soc-share{
    display: inline-block;
    margin-right: 30px;
}

.all-soc-share{
    width: 100%;
    text-align: center;
}

这是一个小提琴： https://jsfiddle.net/qaq9r4fs/

Answer 2

你可以通过提供

在纯CSS中完成

.theclasstocenter {
      margin-left:auto;
 }

或者您可以下载引导程序并将这些社交按钮置于自定义类的中心＆＃34;文本中心＆＃34;

div中的中心按钮

2 个答案: