css - 让自动边距为中心对齐 div 工作

Question

我肯定在这里忽略了一些明显和简单的事情，但我将不得不承认失败并暂时提出要求。

我做了一个 JSfiddle .

一个简单的。简单地尝试将 div 类 ratings 在其父容器内居中对齐。在多次使用它之后，我还没有设法让任何自动利润率发挥作用。

下面的代码:-

CSS

.caption {
    padding: 9px;
    width: 100%;
    display: block;
}

.ratings {
    width: 100%;
    overflow: hidden;
    margin: 3px auto;
    display: block;
}

标记

<div class="caption">
    <h2 class="product-name"><a href="#">Product Title</a></h2>

    <div class="ratings">
        <div class="rating-bar">
        <div class="rating-box"></div>
        <div class="rating" style="width:100%"></div>
        <div class="rating-fill"></div>
    </div>
        <span class="amount"><a href="#">(2)</a></span>
    </div>
</div>

Answer 1

.ratings 只是一个容器，因此您可以从 .rating-bar 中删除 float 并改用 display: inline-block，然后在 .ratings

上设置 text-align:center

.ratings {
    text-align: center;
}

.ratings .rating-bar{
    display: inline-block;
    /*float:left; remove this*/
}

Demo fiddle