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

來源

2015-06-20 TacoCat

如果一個小提琴是一件麻煩事，考慮[可運行的代碼片段]（http://blog.stackoverflow.com/2014/09/introducing-可運行的JavaScript-CSS-和HTML的代碼段/） – ethorn10

不確定爲什麼你有浮動在那裏。試試這個：

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

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

而且這裏有一個小提琴： https://jsfiddle.net/qaq9r4fs/

來源

2015-06-20 01:24:28 sarme

你能做到這一點的純CSS通過提供

.theclasstocenter { 
     margin-left:auto; 
}

或者你可以下載引導程序並將這些社交按鈕與自定義類「文本中心「。

來源

2015-06-20 01:18:31 modesitt

div中的居中按鈕

回答

相關問題