フローティングディビジョンを中心にする方法

Question

投票ボタン、共有ボタン、コメントへのリンクの3つの列が並んでいます。

これらの幅は混在しています。しかし、私はの中に浮動要素を水平方向に配置することに問題があります。写真：

あなたが見ることができるように、センタリングテキスト（最後の部分）との問題はありません。しかし、他の人たちはどうですか？ヘルプと役に立つかもしれない他の提案のための

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

ありがとう： はここに私のコードです。

解決と「フロート」プロパティ：

こんにちは、私の問題ではなく、「ブロック表示」のフレックスボックスを使用することによって解決しました。私は可能なすべての要素を（水平および垂直に）中心に置くことができるので、この種の問題に使用することをお勧めします。また、小さなデバイスで要素の動作を定義するのに役立ちます。

Answer 1

これを試してみて、快適なあなたのように幅、

.object-ボタン{マージン変更 ：自動;幅：500px; }