将h1元素和输入元素垂直居中时遇到麻烦
[英]Having trouble vertically centering an h1 element and an input element
问题描述
目标：我正在尝试在用户正在输入一些信息的地方项目上建立输入。 目前，我将其设置为在最左侧的气泡中输入标签，然后是两个文本输入气泡。
问题：在标有气泡的气泡后面的输入字段大约有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>
3 个解决方案
解决方案1
0 2017-12-26 05:41:04
使用display: flex; 为.textContainer解决5px问题。
请参阅此文件了解FlexBox
解决方案2
0 已采纳 2017-12-26 05:55:22
我已经在下面更新了您的代码段。 我认为这是您正在寻找的东西，只是通过使用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>
解决方案3
0
我在您的HTML代码中注意到的一件事是您的第二个.inputContainer缺少一个.textContainer 。 既然您说过您是HTML和CSS的新手，我建议您使用基本属性（例如float来使元素并排堆叠，并margin用于间距/对齐的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>
垂直居中放置元素时遇到麻烦
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.