如何在Bootstrap列中水平居中星级图像？

Question

我有一个星级评分图片，使用Javascript和CSS控制显示五个评级（四分之一步，二十是星的尺寸，以像素为单位）：

$.fn.stars = function() {
    return $(this).each(function() {
        var val = Math.round(parseFloat($(this).html())*4)/4;
        var size = Math.max(0, (Math.min(5, val)))*20;
        var $span = $("<span />").width(size);
        $(this).html($span);
    });
}

$(function() {
    $("#avg-rating").html('<span class="stars">{{ avg_rating }}</span>');
});

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -20px repeat-x;
    width: 100px;
    height: 20px;
}
span.stars span {
    background-position: 0 0;
}

图像显示在Bootstrap列中：

<div class="container-fluid">
    <div class="text-center">
        <div class="row">
            <div class="col-xs-6"><div id="avg-rating"></div></div>
            <div class="col-xs-6">blah blah</div>
        </div>
    </div>
</div>

图像目前在其列中保持对齐。我在CSS中尝试了几种方法，使图像在其列中水平对齐，例如调整显示属性或背景位置。但是我没有在不破坏图像处理功能的情况下移动图像。

更新

使用内联块而不是块会混淆星星的位置（图像应该显示五颗中的四颗点亮的星星）：

span.stars, span.stars span {
    display: inline-block;
...

Answer 1

如果具有类“col-xs-6”的元素应该水平相邻，则可以使用内联块。

.col-xs-6 {
    display: inline-block;
}

div元素默认为阻止，将它们放在一个新行上。

Answer 2

你的问题似乎源于此：

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -20px repeat-x;
    width: 100px;
    height: 20px;
}

您已将星形容器设置为'display：block'，这会占用整行。您希望它是一个宽度小于可用全宽的内联块，以便它可以居中。

以下是一个如何工作的示例： https://jsfiddle.net/f6L8gr1b/2/