Having trouble vertically centering an h1 element and an input element
Question
Goal: I am trying to set up an input on a side project I'm working on where the user inputs some information. Currently I have it set up with the label of the input in the left most bubble followed by two text input bubbles.
Problem: The input fields are about 5 pixels bellow the bubble that is labeling them and I can't figure out how to correct that.
Notes: I'm fairly new to HTML/CSS and am completely self taught so if there is a better way to do what I am trying to do please let me new. Bellow is the section that is giving me trouble
.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 answers
solution1
0 2017-12-26 05:41:04
Use display: flex; for .textContainer to solve 5px problem.
Please see this document for FlexBox
solution2
0 ACCPTED 2017-12-26 05:55:22
I have updated your snippet below. I think this is what you are looking for and was simply fixed by using vertical-align: middle; on the label . Not sure of what you are using this for, however, I would suggest perhaps using a framework such as https://getbootstrap.com/ . Most frameworks will have great foundation blocks across all screen sizes and devices (as in the snippet below, you'll have to view in full screen, otherwise it is a mess. Currently, from a UI focus, this implementation is very limited by not being responsive.
Hope this helps.
.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>
solution3
0
One thing I noticed in your HTML code is your second .inputContainer is missing a .textContainer . Since you've said that you're fairly new to HTML and CSS, I suggest that you use basic properties like float to make elements stacked side by side and margin for spacing/aligning.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.