在Bootstrap井中心

Question

我一直在努力让一个好转的内容很好地集中在一起。我的徽章向右移动，而不是在箭头下方，我的箭头（也就是投票按钮）也没有在井中居中。我附上了截图，这里是相关代码：

HTML：

<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
    <i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
    <div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
    <i class="glyphicon glyphicon-chevron-down"></i>
</div>

以下是默认bootstrap之外的唯一自定义CSS：

/* Voting styling */
.votingButton{
cursor: pointer;
}

以下是截图：

Answer 1

尝试class="text-center"，这应该可以解决问题，如果没有，你可以使用style="postion: absolute; margin-left: -5px;"重新定位它，如果你对井尺寸不太挑剔，这可能是另一个问题，因为“好” 。修改大小，这将有所帮助。

Answer 2

您的列宽太小，无法正确呈现。您需要将col-md-1 col-sm-1更改为col-md-2 col-sm-2或减少div中的填充。