センターフォームの入力が応答します

Question

私はこれらの入力フィールドを応答的に中央に配置しようとしていますが、少し問題があります。誰かが私がどこに間違っているかもしれないかを教えてもらえますか？私は親divとコンテナ要素を作成しようとしましたが、 "margin：0"は機能していないようです。

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

これはどのように見えますか？私は、コンテンツが一番左の側にあることを確認するleft: 0を追加

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

更新

私は.userInfoValuesから左にテキストを使用して除去、私は

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

を作っ1回の更新を忘れて申し訳ありません調整センター #settings-info

Answer 2

CSS3が少し変更されました もっと。フレックスボックスの助けを借りて、我々は簡単にそれを行うことができます。

#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; 
} 

私は実際にコンテナフォームのプロパティだけを変更しました。これをチェックしてください。伝統的な方法よりはるかに優れており、常に反応します。唯一の問題は、フレックスボックスのブラウザ互換性です。

コードを確認できますCodepen