html - Centering buttons within a div -

i can't seem center social media buttons. all-soc-share class right empty. how should center them in css? (its hassle provide fiddle)

the html code

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

the css

.soc-share{     float: left;     margin-right: 30px; } 

not sure why have float left in there. try this:

.soc-share{     display: inline-block;     margin-right: 30px; }  .all-soc-share{     width: 100%;     text-align: center; } 

and here's fiddle: https://jsfiddle.net/qaq9r4fs/