无法弄清楚如何将文本水平对齐到输入的左侧

Question

this is a very beginner question, but I have been trying to figure out a way to have the Name, Email, and Age aligned to the left of the input fields. And then have it centered on the input boxes.

Here is a link to my codepen.io

I have tried floating the text to the left and making the inputs display as blocks. The input seems to be stuck having an extremely wide width which is making the text not display properly. If I manage to shrink the width of the box, and want to adjust the padding it makes the input box bigger! Instead of moving the the text and input left or right.

 #text-label { width: 50%; } #text-input { width: 40%; display: block; margin: auto; } #email-input { width: 80%; display: block; margin: auto; } #number-input { width: 80%; display: block; margin: auto; } 

 <div id="name-email-age"> <div id="name" class="center"> <label id="text-label"> * Name: </label> <input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required /> <div id="email" class="center"> <label id="email-label"> * Email: </label> <input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required /> </div> <div id="age" class="center"> <label id="age-label"> * Age: </label> <input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" required max="122" min="5" /> </div> </div> 

Answer 1

Change the input display styles to inline-block .

https://codepen.io/AustinGordon/pen/yEodLo

Answer 2

Maybe your can try this:

Wrap labels and controls in .control-group for optimum spacing and change box to ideal size =).

 #text-label { width: 50%; } #text-input { width: 50%; display: block; } #email-input { width: 100%; display: block; } #number-input { width: 100%; display: block; } .control-group { width: 80%; margin: auto; text-align: left; } 

 <div id="name-email-age"> <div id="name" class="center"> <div class="control-group"> <label id="text-label">* Name:</label> <input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required /> </div> </div> <div id="email" class="center"> <div class="control-group"> <label id="email-label">* Email:</label> <input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required /> </div> </div> <div id="age" class="center"> <div class="control-group"> <label id="age-label">* Age:</label> <input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" max="122" min="5" required /> </div> </div> </div>