0

我肯定在这里忽略了一些明显而简单的事情，但我现在不得不承认失败并提出问题。

我做了一个JSfiddle。

一个简单的。只需尝试在ratings其父容器内居中对齐 div 类。在多次使用它之后，我根本没有设法获得任何自动利润。

下面的代码： -

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

4 回答 4

1

.ratings只是一个容器，因此您可以从中移除浮动.rating-bar并使用，display: inline-block然后设置text-align:center.ratings

.ratings {
    text-align: center;
}

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

演示小提琴

于 2013-09-03T16:04:00.073 回答
0

您需要设置特定宽度，例如150px在 Ratings 类上而不是100% 否则，100% 宽度意味着边距 = 0 的计算（没有边距）

于 2013-09-03T15:57:00.137 回答
0

它的宽度为100%，这意味着该auto值计算为 0 像素。您将需要：

1）指定您实际想要的宽度。

2）使其收缩以适应display: inline-block，然后将其包裹在一个块中text-align: center

于 2013-09-03T16:01:12.903 回答
0

默认情况下，块级元素的宽度为 100%，因此在这种情况下定义 100% 的宽度是无关紧要的。

基本上，您的子元素需要具有比其父元素更小的宽度，以便能够水平居中。

例如;

.ratings {
  width:50%;
  margin:0 auto;
}
于 2013-09-03T16:01:46.267 回答