中央窗体输入响应

-2

我试图让这些输入字段响应居中，但我有点麻烦。有人能让我知道我可能会出错吗？我试图创建一个父div，然后容器元素，但不能“边距：0”似乎并没有工作。中央窗体输入响应

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

来源

2017-06-29 stingMantis

查看代码什么不是中心？小提琴看起来不错 – Huangism

是吗？我在Chrome中运行它，而且在Chrome浏览器中看起来很好，但是在iphone5和6上它看起来很好，并且向右转。 – stingMantis

这个怎么样？我加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; 
}

更新

对不起，我忘了更新我做了

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

我删除从.userInfoValues左和使用的文本 - 对齐中心#settings-info

来源

2017-06-29 19:43:53 Huangism

嗯......仍然离开5和6的中心。虽然在模拟器中看起来很好，但这很奇怪。我可能不得不深入研究这一点。谢谢虽然;） – stingMantis

@stingMantis对不起，忘了更新，检查新的小提琴 – Huangism

yesssss！太好了！非常感谢，拯救生命！ – stingMantis

CSS3已经改变了一点更多。借助flexbox，我们可以轻松完成。

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

我实际上只改变了容器形式的属性。请检查一下。它比传统方法好得多，并且始终处于响应状态。唯一的问题是Flexbox的浏览器兼容性。

您可以在Codepen

来源

2017-06-30 11:08:28 Abinthaha

中央窗体输入响应

回答

相关问题