Boostrap v4.0.0-alpha.6 模型 - 如何居中模型標題

Question

您如何使模型的標題居中？ 我厭倦了將類“text-center”添加到 h1 標簽，但它一直顯示磁貼左對齊。

謝謝

Answer 1

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

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

Answer 2

我今天必須弄清楚這一點，特別是當我想要在modal-title中居中的模態modal-header時 - 嘗試了幾種不同的方式，但這是我確定的：

<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 。

Answer 3

這個問題在這里有詳細的答案

Bootstrap 4 模態中心內容

只需將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>

Answer 4

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

Answer 5

嘗試更改模態標題

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

Answer 6

Sava 方法對我有用。 另一種方法是添加“margin: 0 auto;” 對於您用於標題的任何 css 類。 例如，如果您使用模態標題，請添加到您的 css：

.modal-title {
    margin: 0 auto;
}

Answer 7

您還可以將這些類添加到 modal-header
.ml-auto.mr-汽車

<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>

Answer 8

是的 CSS 就足夠了，即使在 bootstrap vue 中也是如此：

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

您只需：

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

在你的 css 文件中讓它居中。

Answer 9

試試style="margin: 0 auto;" 像<h5 class="modal-title" style="margin: 0 auto;">title</h5>它工作正常！

Answer 10

要使標題居中並保留關閉按鈕，您可以這樣做：

<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>

Answer 11

只需在模態標題 div 中添加.justify-content-center類：

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

Answer 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>