如何使浮动div居中

Question

我连续有 3 列：投票按钮、分享按钮和 cmets 链接。

它们的宽度是混合的。但是我对它们内部的水平居中浮动元素有疑问。照片：

如您所见，居中文本没有问题（最后一节）。但是其他人呢？ 这是我的代码：

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

感谢您的帮助和其他可能有用的建议。

解决方案：

您好，我的问题通过使用 flex-boxes 而不是“display: block”和“float”属性得到了解决。我建议您将它用于此类问题，因为它允许您将所有可能的元素居中（水平和垂直）。此外，它还可以帮助您定义元素在较小设备上的行为。

Answer 1

试试这个， 随意改变宽度，

.object-buttons { 边距：自动；宽度：500px； }