行显示块的中心内容Bootstrap v4 [重复]答案

【问题标题】：center content of row display block Bootstrap v4 [duplicate]行显示块的中心内容Bootstrap v4 [重复]
【发布时间】：2020-07-26 15:19:03
【问题描述】：

我使用的是 Bootstrap v4.3.1，但我确实更改了 bootstrap.min.css 文件 所有display:flex; 替换为display:block;

因为 flex 在 firefox 的打印模式下无法正常工作。无论如何，在更改此行之后，即使我使用 justifice-content-center，任何行类都不能居中。

我认为原因是因为行类是块而不是 flex，所以当它的块时如何使行的内容居中？

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

更新 #1 为了清楚起见，我正在使用经过编辑的 Bootstrap，如下所示

<link rel="stylesheet" media="print" href="'css/Editedbootstrap.css" />

所以它只在打印模式下，see the following post 以获取有关我面临的问题类型的更多信息

【问题讨论】：

首先，这是错的，不能直接改bootstrap.min.css。
bootstrap 内部使用flexbox 管理所有东西，所以你的sm, md, lg, xl 将无法工作

标签： html css bootstrap-4

【解决方案1】：

我在发布答案之前警告您，bootstrap.min.css 不得直接更改。

如果您不想使用flexbox，请使用Bootstrap 3

要使.row 等任何块居中，您可以使用text-center 类或使用CSS。

.row {
    text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

【讨论】：

如果您喜欢我的回答或者您从我的回答中得到任何帮助，请不要忘记考虑投票并通过单击右箭头将此答案作为您的最佳答案，谢谢！

【解决方案2】：

要将div（块元素）定位在中心，技术是让左右边距都自动，然后给div一个宽度：

.center-div {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

【讨论】：