Center Bootstrap Modal horizo​​ntal

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-偏移1或COL-SM-偏移1 COL-SM-偏移3您可以通过X列移动元素的权利。因为你的模态不需要整个12列，所以你必须把它移动2到右边。

从引导3.1偏移量不适用于XS列。

.col-xs-offset- *不存在。偏移和列排序仅适用于小型和更多。 （ONLY .COL-SM-经偏置，.COL-MD-经偏置和.COL-LG-经偏置*）

洙：

您可以使用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 
}