如何居中浮动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

回答

相关问题