我在这里忽略了一些明显而简单的东西,但我现在不得不承认失败,现在问问。
我做了JSfiddle。
一个简单的。只需尝试将div类ratings
居中对齐在其父容器中。经过无数人的努力,我还没有设法获得任何汽车保证金。
以下代码: -
.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>
答案 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)
您需要设置一个特定的宽度,例如在评级类而不是150px
上100%
否则,100%宽度意味着边距的计算= 0(边距没有剩余)
答案 2 :(得分:0)
它的宽度为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
答案 3 :(得分:0)
默认情况下,块级元素的宽度为100%,因此在这种情况下定义宽度为100%无关紧要。
基本上,您的子元素需要具有比其父元素更小的宽度,以便能够水平居中。
e.g;
.ratings {
width:50%;
margin:0 auto;
}