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 
}