Bootstrap v4.0.0-alpha.6 模型 - 如何使模态标题居中答案

【问题标题】：Boostrap v4.0.0-alpha.6 model - how to center model titleBootstrap v4.0.0-alpha.6 模型 - 如何使模态标题居中
【发布时间】：2020-12-26 21:19:54
【问题描述】：

如何使模型的标题居中？我厌倦了将“文本中心”类添加到 h1 标记，但它一直显示磁贴左对齐。

谢谢

【问题讨论】：

提供您的代码。这样我们就可以通过并预测确切的问题并给您正确的答案。

标签： html css bootstrap-modal

【解决方案1】：

您可以在h3.modal-title 元素上使用w-100 类以及text-center。

<div class="modal-header text-center">
  <h3 class="modal-title w-100">Quiz Results</h3>
</div>

【讨论】：

工作就像一个魅力！而且我认为这比使用.col-12 更好，因为h3 不在.row 内。

【解决方案2】：

我今天必须弄清楚这一点，特别是当我想要在 modal-header 中居中的 modal-title - 玩弄了几种不同的方式，但这是我决定的：

<div class='modal-dialog' role='document'>
  <div class='modal-content'>
    <div class='modal-header'>
      <h3 class='col-12 modal-title text-center'>
        Centered Modal Title
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </h3>
    </div>
  </div>
</div>

如果您想在“modal-header”标签内进行操作，关键是要有col-12。

【讨论】：

谢谢！我已经尝试了一个多小时！
巴勒。加油！

【解决方案3】：

问题在这里有详细解答

Bootstrap 4 Modal Center Content

只需将 w-100 属性值添加到类属性。那就是：

<div class="modal-header">
   <h5 class="modal-title w-100 text-center">Contact us via Email</h5>
   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>

【讨论】：

【解决方案4】：

<h3 class="modal-title w-100 text-center">I'm centered title</h3>

【讨论】：

【解决方案5】：

尝试更改模态标题

.modal-header{
justify-content: center;
}

【讨论】：

【解决方案6】：

Sava 方法对我有用。另一种方法是添加“margin：0 auto;”对于您用于标题的任何 CSS 类。例如，如果您使用 modal-title，请添加到您的 CSS：

.modal-title {
    margin: 0 auto;
}

【讨论】：

【解决方案7】：

要使标题居中和保持 dismiss 按钮，您可以执行以下操作：

<div class="modal-header pl-0">
    <h5 class="modal-title w-100 text-center position-absolute">Title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

【讨论】：

【解决方案8】：

只需在模态标题 div 中添加 .justify-content-center 类：

<div class="modal-header justify-content-center">
     //your content here
</div>

【讨论】：

【解决方案9】：

是的，CSS 就足够了，即使在 bootstrap vue 中：

<b-modal id="mymodal" title="My Modal">

你只需要：

.modal-title{
  width: 100%;
  text-align: center;
}

在您的 css 文件中使其居中。

【讨论】：

【解决方案10】：

试试style="margin: 0 auto;" 就像<h5 class="modal-title" style="margin: 0 auto;">title</h5> 一样好用！

【讨论】：

【解决方案11】：

您也可以将这些类添加到 modal-header
.ml-auto .mr-auto

<div class="modal-header ml-auto mr-auto">
 <h5 class="modal-title" id="exampleModalLongTitle">Model Title</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;</span>
  </button>
</div>

【讨论】：

【解决方案12】：

<div class="modal-header">
    <div class="col-1"></div>
    <div class="col-10 text-center"><h5 class="modal-title">Чтото пошло не так... :(</h5></div>
    <div class="col-1 ms-3">
        <button type="button" class="btn-close" onclick="closeModal()"></button>
    </div>
</div>

【讨论】：