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

Posted 2023-03-05

【中文标题】使用引导程序在 div 中居中文本 [重复]

【英文标题】：Centering text within div using bootstrap [duplicate]

【发布时间】：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

【参考方案1】：

使用

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

demo