对齐整个页面内容会使表单稍微偏离中心
对齐整个页面内容会使表单稍微偏离中心
提问于 2018-08-14 01:44:14
.formholder {
width: inherit;
}
.formposition
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
input[type=text], select {
width: 100%;
padding: 2vh 4vh;
margin: 1vh;
display: inline-block;
border: 0.5vh #ffffff;
border-radius: 1vh;
box-sizing: border-box;
border: solid 0.5vh #ffffff;
}
.formposition {
position: absolute;
width: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
input[type=text], select {
width: 100%;
padding: 2vh 4vh;
margin: 1vh;
display: inline-block;
border: 0.5vh #ffffff;
border-radius: 1vh;
box-sizing: border-box;
border: solid 0.5vh #ffffff;
}
input[type=submit] {
width: 100%;
padding: 2vh 4vh;
margin: 1vh;
display: inline-block;
border-radius: 1vh;
box-sizing: border-box;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: solid 0.5vh #ffffff;
}
@media only screen and (max-width: 500px) {
input[type=submit] {
width: 100%;
padding: 2vh 4vh;
margin: 1vh;
display: inline-block;
border-radius: 1vh;
box-sizing: border-box;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: solid 0.5vh #ffffff;
}
}
form {
width: auto;
margin-left: 0vh;
margin-right: 0vh;
text-align: center;
}<div class="formholder">
<div class="formposition">
<form action="responses.php" method="post">
<input type="text" placeholder= "Test Field" name="TestField" required><br>
<input type="submit">
</form>
</div>
</div>
DIVs的作用是居中，但表单本身并不完全居中。
按钮和输入应该在页面上完全居中，但它们不会接触到DIV的左侧，它们会溢出到右侧，包括边框。
整个内容将位于页面的中间。由于表单元素偏离中心，左侧有更多的空间，很明显它们没有居中。
修复或指针将非常受欢迎。
提前感谢:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-14 01:51:36
这是因为input[type=submit]上的左边距和右边距。将其更改为margin: 1vh 0以解决此问题，因为您希望它变得100%宽度。
输入的实际宽度是100% + 1vh (右边距)+ 1vh (左边距)。边距不会计算为宽度。
.formholder {
width: inherit;
}
.formposition
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
input[type=text], select {
width: 100%;
padding: 2vh 4vh;
margin: 1vh 0;
display: inline-block;
border: 0.5vh #ffffff;
border-radius: 1vh;
box-sizing: border-box;
border: solid 0.5vh #ffffff;
}
.formposition {
position: absolute;
width: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
input[type=text], select {
width: 100%;
padding: 2vh 4vh;
margin: 1vh 0;
display: inline-block;
border: 0.5vh #ffffff;
border-radius: 1vh;
box-sizing: border-box;
border: solid 0.5vh #ffffff;
}
input[type=submit] {
width: 100%;
padding: 2vh 4vh;
margin: 1vh 0;
display: inline-block;
border-radius: 1vh;
box-sizing: border-box;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: solid 0.5vh #ffffff;
}
@media only screen and (max-width: 500px) {
input[type=submit] {
width: 100%;
padding: 2vh 4vh;
margin: 1vh 0;
display: inline-block;
border-radius: 1vh;
box-sizing: border-box;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: solid 0.5vh #ffffff;
}
}
form {
width: auto;
margin-left: 0vh;
margin-right: 0vh;
text-align: center;
}<div class="formholder">
<div class="formposition">
<form action="responses.php" method="post">
<input type="text" placeholder= "Test Field" name="TestField" required><br>
<input type="submit">
</form>
</div>
</div>
Stack Overflow用户
发布于 2018-08-14 01:51:44
似乎输入的左右边界正在将输入推到包含的form/div之外。尝试在输入上使用"margin: 1vh 0;“，而不是"margin: 1vh;”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51827866
复制相关文章
相似问题
腾讯云开发者
