使用引导程序在 div 中居中文本 [重复]答案

【问题标题】：Centering text within div using bootstrap [duplicate]使用引导程序在 div 中居中文本 [重复]
【发布时间】：2018-02-04 22:53:34
【问题描述】：

尝试熟悉 Bootstrap 及其网格系统。下面显示了我创建页脚的尝试，我不想使用所有 12 个列，目前它看起来很好 - 但由于某种原因，我无法将列表项在 div 中居中。我尝试过使用 Google 开发工具，但找不到真正的原因。

.wrapper{
    width:80%;
    margin:0 auto;
}
.footer{
    margin:0 auto;
    text-align:center;
}

HTML

  <div class="row footer">
            <div class="wrapper clearfix">
                <div class="col-md-2 ">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <ul>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                        <li>Bob</li>
                    </ul>
                </div>
            </div>
        </div>

【问题讨论】：

这似乎按预期工作，你想达到什么目的？项目在其列表中居中，还是列表在页脚中居中？
col-* 应该是 row 的直系子代
Col-*s 设置为 float:left 默认情况下在引导程序中我们需要重置检查链接jsfiddle.net/7acynjLj/1

标签： html css twitter-bootstrap

【解决方案1】：

使用

.footer ul {
  display: grid;
  justify-content: center;
}

demo

【讨论】：