2017-07-14 16 views
0

In meinem Angular Programm versuche ich mein Bootstrap 3 Modal horizontal auf dem Bildschirm zu zentrieren. Ich habe alles versucht, was ich gesehen habe und ich habe versucht text-align: center und align = "center" und ich kann es nicht zur Arbeit bekommen. Wie kann ich es zentrieren?Center Bootstrap Modal horizontal

Hier eine gekürzte Version meines modal:

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

und hier, wo es heißt:

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

Ich bin Entschuldigung, wenn das ein Duplikat ist, aber ich habe alles versucht, was ich hier gesehen habe und nichts davon funktioniert. Ich bin mir nicht sicher, ob ich die Attribute auf den falschen div setze oder was ich falsch mache.

Here's how it shows up in the browser

+0

ist das alles von dem hTML-Code, der innerhalb 'modal-dialog' oder' modal-content' ist? Es wäre besser, wenn du das gerenderte HTML postest. – ZimSystem

+0

set width 'width: 50%;' –

+0

@SuneelKumar in meinem css oder auf einem bestimmten div? – asdf

Antwort

1

Sie verwenden col-xs-10 so:

von col-md-Offset-1 oder col-SM-Offset-1 col-SM-Offset-3 Sie Element bewegen, indem X Spalten nach rechts. Weil Sie Modal nicht ganze 12 Spalten nehmen, müssen Sie es um 2 nach rechts verschieben.

Von Bootstrap 3.1 Offset funktioniert nicht für XS-Spalten.

.col-xs-offset- * existiert nicht. Offset und Spaltenreihenfolge sind nur für kleine und mehr. (NUR .col-sm-Offset- , .col-md-Offset- und .col-lg-Offset- *)

Soo:

Sie SM oder MD Spalte oder eine Gruppe Element verwenden können, wie display:inline-block; und Behälter für modal eingestellt 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 
} 
+0

danke! Ich wechselte zu SM-Spalten! – asdf