Center Form Eingänge reagieren

Question

Ich versuche, diese Eingabefelder zu bekommen, um in der Mitte zentriert werden, aber ich habe ein bisschen Ärger. Kann mir jemand sagen, wo ich vielleicht falsch liege? Ich habe versucht, ein Eltern-Div und dann das Container-Element zu erstellen, aber nicht die "Marge: 0" scheint nicht zu funktionieren.

Js fiddle

HTML

<div id="settings-info"> 
     <div class="settings-info-container"> 
      <form enctype="multipart/form-data" id="userUpdateForm"> 
      <input type="text" id="userFnameValue" class="userInfoValues" placeholder="First Name" 
       value="{{ userSettings[0]['fName'] }}"/> <br> 

      <input type="text" id="userLnameValue" class="userInfoValues" placeholder="Last Name" 
       value="{{ userSettings[0]['lName'] }}"/> <br> 

      <input type="text" id="userLocalValue" class="userInfoValues" placeholder="Location" 
        value="{{ userSettings[0]['userLocation'] }}"/> <br> 

      <input type="text" id="userNameValue" class="userInfoValues" placeholder="UserName" 
      value="{{ userSettings[0]['userName'] }}"/><br> 

      <input type="text" id="userGenderValue" class="userInfoValues" placeholder="Gender" 
      value="{{ userSettings[0]['userGender'] }}"/> <br> 

      <input type="text" id="userEmailValue" class="userInfoValues" placeholder="Email" 
        value="{{ userSettings[0]['emailAddress'] }}"/><br> 

      <div id="info-pref-sub-btn"> 
       <span id="info-pref-sub-text">Update Info</span> 
      </div> 
      </form> 
     </div> 
    </div> 

CSS

#settings-info{ 
    position: absolute; 
    top: 395px; 
    background-color: rgba(0, 0, 0, 0.84); 
    /*background-color: red;*/ 
    width: 100%; 
} 

.settings-info-container{ 
    position: relative; 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.84); 
    /*background: green;*/ 
} 

.userInfoValues{ 
    position: relative; 
    font-size: 120%; 
    text-align: center; 
    left: 9%; 
    width: 82%; 
    /*width: 250px;*/ 
    height: 38px; 
    margin: 12px auto 18px; 
    border-radius: 8px; 
    border: 2px solid white; 
    opacity: 0.5; 
    background: #000; 
    color: white; 
} 

/*same as our access and details submit button...may want to put in a class*/ 
#info-pref-sub-btn { 
    position: relative; 
    width: 100%; 
    height: 60px; 
    color: white; 
    font-size: 145%; 
    font-weight: bold; 
    background-color: #0070a3; 
    border: 0; 
    border-radius: 1px; 
    text-align: center; 
} 
#info-pref-sub-text{ 
    position: relative; 
    top: 30%; 
} 

Answer 1

Wie sieht das? Ich fügte hinzu, left: 0 um sicherzustellen, dass der Inhalt auf der ganz linken Seite ist

#settings-info{ 
    position: absolute; 
    top: 395px; 
    background-color: rgba(0, 0, 0, 0.84); 
    /*background-color: red;*/ 
    width: 100%; 
    left: 0; 
    text-align: center; 
} 

aktualisieren

Leider habe ich ein Update habe ich vergessen

gemacht

https://jsfiddle.net/kkh7f76h/4/

ich von .userInfoValues links entfernt und Text verwendet -align center on #settings-info

Answer 2

Das CSS3 hat sich ein wenig verändert Mehr. Mit Hilfe von Flexbox können wir es einfach machen.

#settings-info{ 
position: absolute; 
top: 395px; 
background-color: rgba(0, 0, 0, 0.84); 
width: 100%; 
} 

.settings-info-container{ 
    width: 100%; 
    background-color: rgba(0, 0, 0, 0.84); 
} 

.settings-info-container form { 
    padding: 20px 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

.userInfoValues{ 
    font-size: 20px; 
    padding: 10px; 
    min-width: 600px; 
    text-align: center; 
    border-radius: 8px; 
    border: 2px solid white; 
    opacity: 0.5; 
    background: #000; 
    color: white; 
} 

Ich änderte eigentlich nichts als die Eigenschaft der Containerform nur. Überprüfen Sie bitte das. Es ist weit besser als die traditionellen Methoden und jederzeit ansprechbar. Das einzige Problem ist die Browserkompatibilität der Flexbox.

Sie können den Code unter Codepen überprüfen