如何在Bootstrap 3上的列中居中内容

Question

我有这段代码：

<div class="article-quiz-content.container">
    <div class="row">
        <div class="col-xs-6.quiz-cols">
            <div class="true-placeholder">
                <a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
            </div>
        </div>
        <div class=col-xs-6.quiz-cols">
            <div class="false-placeholder">
                <a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
            </div>
        </div>
    </div>
</div>

导致这一点：

我需要这些图标位于列的中心。

建议？

Answer 1

只需将类text-center添加到列（.col-xs-6）

即可

参考：https://getbootstrap.com/css/#type-alignment

编辑：更改标记后，您需要将其添加到占位符div

Answer 2

你可以在你的css中做这样的事情：

.quiz-cols{
   text-align: center;
}

.amenitie_icon{
  display: inline-block;

}

如果容器有text-align: center

，则内联块元素浮动到中心