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

时间:2013-09-03 15:53:35

标签: css

我在这里忽略了一些明显而简单的东西,但我现在不得不承认失败,现在问问。

我做了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>

4 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

您需要设置一个特定的宽度,例如在评级类而不是150px100% 否则,100%宽度意味着边距的计算= 0(边距没有剩余)

答案 2 :(得分:0)

答案 3 :(得分:0)

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

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

e.g;

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