难以垂直居中h1元素和输入元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了难以垂直居中h1元素和输入元素相关的知识，希望对你有一定的参考价值。
目标：我正在尝试在我正在处理的用户输入一些信息的侧项目上设置输入。目前我在最左边的气泡中设置了输入标签，然后是两个文本输入气泡。
问题：输入字段比标记它们的气泡下方约5个像素，我无法弄清楚如何纠正它。
注意：我对html / CSS相当新，我完全是自学成才，所以如果有更好的方法来做我想做的事，请让我新的。贝娄是给我带来麻烦的部分
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>答案
我已在下面更新了您的代码段。我认为这是你正在寻找的东西，只是通过在vertical-align: middle;上使用label来解决。不知道你使用的是什么，但是，我建议使用像https://getbootstrap.com/这样的框架。大多数框架都会在所有屏幕尺寸和设备上都有很好的基础块（如下面的代码片段，你必须全屏查看，否则它就是一团糟。目前，从UI的角度来看，这种实现非常有限。敏感。
希望这可以帮助。
.inputConatiner {
height: 75px;
}
.textContainer {
height: 75px;
width: 500px;
display: inline-block;
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}<head>
<title>Side Project</title>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<body>
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</form>
</body>另一答案
使用display: flex; for .textContainer解决5px问题。
有关FlexBox的信息，请参阅此文档
另一答案
我在你的HTML代码中注意到的一件事是你的第二个.inputContainer缺少一个.textContainer。既然你已经说过你对HTML和CSS相当新，我建议你使用像float这样的基本属性来制作并排堆叠的元素，并使用margin进行间距/对齐。
.inputConatiner {
height: auto;
}
/* Without this, the layout would be ruined because of float */
.inputConatiner:before, .inputConatiner:after {
content: '';
display: table;
}
.inputConatiner:after {
clear: both;
}
.textContainer {
height: auto;
width: 500px;
margin-top: 20px;
margin-left: 10px;
float: left; /* This makes the elements stacked side by side */
}
input[type="text"] {
border: 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-left: 10px;
padding-bottom: 13px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
float: left; /* This makes the elements stacked side by side */
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
}
input {
width: 200px;
}<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
</form>以上是关于难以垂直居中h1元素和输入元素的主要内容，如果未能解决你的问题，请参考以下文章