Bootstrap4 模态标题未完全居中答案

【问题标题】：Bootstrap4 Modal-title not fully centeredBootstrap4 模态标题未完全居中
【发布时间】：2020-11-09 09:08:18
【问题描述】：

！不要将其作为重复项关闭，“重复项”中的答案仅相对于 X 按钮居中！

我正在尝试将 bootstrap4 模态的模态标题完全居中。但是，它仅以 X 为中心，而不是以模态的整个宽度为中心。这里的答案：Bootstrap 4 Modal Center Content 都有同样的问题。

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center d-block">
          <h5 class="modal-title d-inline-block" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

标题没有完全居中，正如您在这张图片中看到的那样： modal header centered relative to X

我的问题是是否可以将其居中于模态框的右边缘——而不是 X。

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，close 使用float:right 定位，这将其保留为文档流的一部分。因此，modal-title 总是会根据close 使用的可用宽度减去居中。

要解决这个问题，我们需要将close 拉出流程。最简单的方法是：

.close { 
  position: absolute; 
  right: 1rem;
}

position: absolute 将班级拉出正常流程，这反过来又让modal-title 占据了整个宽度。 right 边距旨在复制为 Modal 组件定义的边距，以确保您的布局或多或少保持不变。

【讨论】：

如果不想使用close图标的绝对位置，也可以选择B，可以将.modal-title { margin-right: -49px; }设置为负px值，即关闭图标的宽度。
非常感谢！ @Robert C. 一个非常有帮助的答案，感谢您抽出宝贵时间并提供详细说明

【解决方案2】：

将 text-center d-block 放在 modal-header 中
竖起按钮关闭
最后一个模态标题。

<div class="modal-header text-center d-block">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h2 class="modal-title">Title center</h2>
    ...
</div>

【讨论】：

这是最简单的方法！

【解决方案3】：

这样的事情怎么样：

#exampleModalLabel {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

【讨论】：

【解决方案4】：

在我这边，我做了以下事情：-

注意：我的模态框的大小是默认的，不大也不小。

然后在 Modal::begin 我添加了 titleOptions 如下

Modal::begin([
  'title' => 'yor title ...',
  'titleOptions' => ['style' => ['margin-left' => '95px']],
  ...other options..
]);

【讨论】：