中心引导模式水平答案

【问题标题】：Center Bootstrap Modal horizontal中心引导模式水平
【发布时间】：2017-07-14 22:52:13
【问题描述】：

在我的 Angular 程序中，我试图将我的 Bootstrap 3 模态在屏幕上水平居中。我已经尝试了我所看到的一切，我已经尝试了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 上，或者我做错了什么。

【问题讨论】：

是modal-dialog 或modal-content 中的所有html 代码吗？如果您发布呈现的html会更好。
设置宽度width:50%;
@SuneelKumar 在我的 CSS 或特定 div 上？
尝试在模态对话框和边距自动属性上设置最大宽度...
@rcarc 内联样式

标签： css twitter-bootstrap angular

【解决方案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
}

【讨论】：