中心Bootstrap模态水平

Question

在我的Angular程序中，我试图将Bootstrap 3 Modal水平放置在屏幕上。我已经尝试过所有我见过的内容，但我已经尝试了text-align: center和align = "center"，我无法让它发挥作用。我该如何居中呢？

这是我的模态的缩写版本：

<div class="col-xs-10" style="padding-top: 50px;">

  <div class="panel panel-default col-xs-8" style="padding-left: 0px; padding-right: 0px;">
    <div class="panel-heading">
      <h3 class="panel-title pull-left" style="width: 300px;">Add New Employee</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" role="form" style="overflow-x:auto;">
        <fieldset>

          <div class="col-xs-6">
            <div class="form-group">
              <label class="col-xs-5" style="padding-left: 0px"> Employee ID </label>
              <div class="col-xs-7">
                <input class='form-control' type="text" id="empID" [(ngModel)]="newEmp.EmpID" name="empID" placeholder="Employee ID" />
              </div>
            </div>
          </div>
         </fieldset>

      </form>
    </div>
  </div>

</div>

以及这里的名称：

<div id="addNewEmployeeModal" class="modal fade" tabindex="-1" role="form" aria-labelledby="myNewEmployeeModal" aria-hidden="true">
 <pto-add-new (updateEmpInfo)="onUpdateEmpInfo($event)" (updateSelectedEmployee)="onUpdateSelectedEmployee($event)"></pto-add-new>
</div>

我很抱歉，如果这是重复的，但我已经尝试了我在这里看到的一切，但没有一个有效。我不确定我是否将属性置于错误的div或我做错了。

Answer 1

您使用col-xs-10所以：

通过col-md-offset-1或col-sm-offset-1 col-sm-offset-3将元素向右移动X列。因为你的模态不需要整个12列，你必须将它向右移动2。

来自bootstrap 3.1偏移对XS列不起作用。

.col-xs-offset- *不存在。偏移和列排序仅适用于小型和更多。 （仅限.col-sm-offset- ，.col-md-offset - 和.col-lg-offset - *）

洙：

您可以使用SM或MD列或将元素设置为display:inline-block;，将容器用于模态集text-align:center;

<div class="my_modal_container" style="padding-top: 50px;">

  <div class="panel panel-default my_modal_panel">

CSS：

.my_modal_container{
   text-align:center;
}
.my_modal_panel{
   display:inline-block;
   text-align:left; // or other
}