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>

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

SOLUTION：

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

Answer 1

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

.object-buttons {margin：auto;宽度：500px; }

如何居中浮动div

1 个答案: