CSS

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移除浮动并改用display: inline-block，然后在text-align:center上设置.ratings

.ratings {
    text-align: center;
}

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

<强> Demo fiddle

Answer 2

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

Answer 3

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

1）Specify the width you actually want。

2）Make it shrink-to-fit with display: inline-block, then wrap it in a block with text-align: center

Answer 4

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

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

e.g;

.ratings {
  width:50%;
  margin:0 auto;
}

获取自动边距以适应中心对齐div

CSS

标记

4 个答案: