So zentrieren Sie Floating divs

Question

Ich habe 3 Spalten hintereinander: Abstimmknöpfe, Freigabetasten und Link zu Kommentaren.

Ihre Breiten sind gemischt. Aber ich habe ein Problem mit horizontal zentriert schwimmende Elemente in ihnen. Foto:

Wie Sie sehen können, gibt es kein Problem mit Zentrierung Text (letzter Abschnitt). Aber was ist mit den anderen? Hier ist mein Code:

.object-buttons { 
 
    
 
    margin: 0 30px; 
 
    height: 28px; 
 
    display: block; 
 
    /*display: table;*/ 
 
    font-weight: bold; 
 
    background-color: green; 
 
} 
 

 
.voting-buttons { 
 
    margin: auto; 
 
    background-color: yellowgreen; 
 
    float: left; 
 
    display: block; 
 
    width: 30%; 
 
} 
 
.sharing-buttons { 
 
    left: auto; 
 
    right: auto; 
 
    display: block; 
 
    float: left; 
 
    width: 40%; 
 
    padding-top:4px; // vertical "centering" 
 
} 
 
.comments-button { 
 
    float: left; 
 
    padding-top:4px; // vertical "centering" 
 
    width: 28%; 
 
    text-align: center; 
 
    background-color: bisque; 
 
} 
 
.share-btn, .tweet-btn, { 
 
    float: left; 
 
} 
 
.vote-btn { 
 
    width: 40px; 
 
    height: 28px; 
 
    border: none; 
 
    background-color: Transparent; 
 
    float: left; 
 
} 
 
.vote-count { 
 
    float:left; 
 
}

<div class="object-buttons"> 
 
    <!-- Głosowanie --> 
 
    <div class="voting-buttons"> 
 
     <button class="vote-btn plus"></button> 
 
     <div class="vote-count vmiddle">23</div> 
 
     <button class="vote-btn minus"></button> 
 
    </div> 
 
    <!-- Share, tweet--> 
 
    &nbsp;&nbsp; 
 
    <div class="sharing-buttons"> 
 
     <div class="share-btn"> 
 
      <div class="fb-share-button" data-href="http://xxx/#" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="http://xxx">Udostępnij</a></div> 
 
     </div> 
 
     <div class="tweet-btn"> 
 
      <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
     </div> 
 
    </div> 
 
    <div class="comments-button"> 
 
     <a href="#">Komentarze (<?php echo $this->commentsCount ?>) </a> 
 
    </div> 
 
    <!--komentuj--> 
 
</div>

Vielen Dank für Hilfe und andere Vorschläge, die nützlich sein könnten.

LÖSUNG: ": Satzanzeige" und "float" Eigenschaften

Hallo, mein Problem durch die Verwendung flex-Boxen statt gelöst wurde. Ich schlage vor, dass Sie es für diese Art von Problemen verwenden, weil es Ihnen ermöglicht, alle möglichen Elemente (horizontal und vertical) zu zentrieren. Außerdem können Sie das Verhalten des Elements auf kleineren Geräten definieren.

Answer 1

Try this, Ändern Sie die Breite, wie Sie bequem,

.object-Tasten {margin: auto; Breite: 500px; }