Question

我试图将这些输入字段设置为响应中心，但我遇到了一些麻烦。有人能告诉我可能出错的地方吗？我尝试创建一个父div，然后创建容器元素，但不能创建＆＃34; margin：0＆＃34;似乎不起作用。

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

这看起来怎么样？我添加了for k in index: if numpy.isnan( a[k] ): a[k] = 0以确保内容位于最左侧

left: 0

更新

抱歉，我忘了我做的一个更新

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

我从#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

上使用了文字对齐中心

Answer 2

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

查看代码

中心表格响应性输入

2 个答案: