Boostrap v4.0.0-alpha.6模型 - 如何集中模型标题

时间:2017-02-08 19:24:00

标签: bootstrap-modal

你如何集中模特的头衔?我厌倦了添加课程" text-center"到h1标签,但它一直显示瓷砖左对齐。

由于

12 个答案:

答案 0 :(得分:15)

我今天必须弄清楚这一点,特别是当我希望在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

答案 1 :(得分:7)

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

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

答案 2 :(得分:2)

  

问题在此处有详细的答案

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>

答案 3 :(得分:0)

Sava方法对我有用。另一种方法是添加“ margin:0 auto;”对于您用于标题的任何CSS类。例如,如果您使用模式标题,则将其添加到CSS中:

.modal-title {
    margin: 0 auto;
}

答案 4 :(得分:0)

style="margin: 0 auto;"一样尝试<h5 class="modal-title" style="margin: 0 auto;">title</h5>很好!

答案 5 :(得分:0)

您还可以将这些类添加到模式标题
.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>

答案 6 :(得分:0)

尝试更改模式标题

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

答案 7 :(得分:0)

要使标题居中保持关闭按钮,您可以执行以下操作:

<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 :(得分:0)

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

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

答案 9 :(得分:0)

是的,即使在Bootstrap vue中,CSS也足够了:

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

您只需要:

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

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

答案 10 :(得分:0)

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

答案 11 :(得分:0)

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

enter image description here