如何居中浮動div

我有一行3列：投票按鈕，共享按鈕，並鏈接到評論。如何居中浮動div

它們的寬度是混合的。但我有一個問題，水平居中裏面的浮動元素。圖文：

正如你所看到的，是定心文本（最後一節），沒有問題。但其他人呢？這裏是我的代碼：

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

感謝您的幫助和其他建議可能是有用的。

SOLUTION：「：模塊顯示」和「浮動」屬性

嗨，我的問題是使用代替柔性盒解決。我建議你使用它來解決這些問題，因爲它可以讓你將所有可能的元素（水平和真實地）居中。此外，它還可以幫助您在較小的設備上定義元素的行爲。

來源

2016-09-11 version_improved

您是否善於將代碼進一步縮小，以滿足最低需求。 – Ricky

請添加jSFiddle你的代碼 –

你可以嘗試顯示：flex –

試試這個，更改寬度爲您提供舒適，

.object-按鈕{保證金：汽車;寬度：500px; }

來源

2016-09-11 10:23:12

如何居中浮動div

回答

相關問題