Bootstrap v4.0.0-alpha.6模型 - 如何以模态标题为中心

Question

你如何集中模特的头衔？我厌倦了将类“text-center”添加到h1标签，但它会一直显示瓷砖左对齐。

谢谢

Answer 1

我今天必须弄清楚这一点，特别是当我想要在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 2

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

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

Answer 3

萨瓦方法对我有用。另一种方法是添加“margin：0 auto;”对于您用于标题的任何CSS课程。例如，如果您使用模态标题，请添加到您的css：

.modal-title {
    margin: 0 auto;
}

Answer 4

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

Answer 5

您还可以将这些类添加到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>

Answer 6

尝试更改模态标题

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