如何在DIV中垂直对齐输入
[英]How do I vertically align an input in a DIV
问题描述
我正在创建一个网站，并且我有一个包含两个输入的登录字段。 我想在DIV中垂直对齐这些项目。
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instagram tweaks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>INSTATWEAKS</p>
</header>
<div class="loginbar">
<input type="text" name="username" id="username" class="input">
<input type="password" name="password" id="password" class="input">
</div>
</body>
</html>
和CSS：
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: block;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
header {
width: 100%;
height: 50px;
text-align: center;
background-color: #111;
position: absolute;
top: 0;
}
body {
margin: 0;
padding: 0;
}
.input {
font-size: 22px;
vertical-align: text-top;
text-align: center;
}
p {
font-size: 30px;
color: lightblue;
margin-top: 10px;
font-weight: bold;
}
我希望div中带有“ loginbar”类的输入垂直居中
4 个解决方案
解决方案1
4 2017-08-08 20:57:14
解决方案2
3 已采纳 2017-08-08 20:49:16
使用diplay：flex
https://codepen.io/Czeran/pen/mMWNwP
.loginbar {
width: 800px;
height: 400px;
box-sizing: border-box;
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px black;
color: orange;
margin-top: 200px;
}
解决方案3
1 2017-08-08 20:58:49
由于您为.loginbar设置了高度，因此可以为它设置一个具有相同值的行高，然后再给.input {vertical-align：middle; }。 并且，以防万一您想水平对齐，请在两个输入周围的HTML中添加另一个div。 给这个div设置一个宽度，我使用了530px，这就是彼此相邻的两个输入是什么，然后给div设置边距：0 auto;
这样，输入将完全居中。
删除代码以实现您想要的。
最好，李维斯
.loginbar { width: 800px; height: 400px; box-sizing: border-box; margin: auto auto; display: block; box-shadow: 0 0 10px black; color: orange; margin-top: 200px; line-height: 400px; } header { width: 100%; height: 50px; text-align: center; background-color: #111; position: absolute; top: 0; } body { margin: 0; padding: 0; } .center { width: 530px; margin: 0 auto; } .input { font-size: 22px; text-align: center; vertical-align: middle; } p { font-size: 30px; color: lightblue; margin-top: 10px; font-weight: bold; }
<header> <p>INSTATWEAKS</p> </header> <div class="loginbar"> <div class="center"> <input type="text" name="username" id="username" class="input"> <input type="password" name="password" id="password" class="input"> </div> </div>
解决方案4
0 2019-10-02 12:14:58
.textField-center {
margin: auto auto;
display: flex;
justify-content: center;
align-items: center;
}
要么
.textField-center {
justify-content: center;
}
使用此CSS
如何垂直对齐div中的文本？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.