如何在中心对齐表格，但在输入的最左侧上方有 label

Question

I thought "hey, let's practice just 10 minutes with forms before bed..." Yeah...it's been an hour and I can't figure it out!

I want all to be centered, except for the label, I want it to be above the input, on the very left. and of course, if I resize the window I want it to "follow" the input, otherwise I could just adjust the position in px.

How can I do it? Thank you very much!

 * { margin: 0; box-sizing: border-box; }.form1 { background: linear-gradient(to right bottom, deepskyblue, pink); margin: 10px; border: 1px solid black; padding: 50px 150px; display: flex; flex-direction: column; font-family: helvetica; font-size: 14px; }.space:focus { outline-color: black; }.space { width: 300px; }.submit { width: 30vw; align-self: center; background: linear-gradient(to top left, rgb(255,105,200), aqua); border: none; border-radius: 20px; padding: 5px; font-family: verdana; font-weight: 600; }

 <div class="form1"> <label for="name">Name</label> <input class="space" type="text" id="name"><br><br> <label for="email">E-mail</label> <input class="space" type="email" id="email"><br><br> <label for="message">Message</label> <textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br> <input type="submit" class="submit" value="Send"> </div>

Answer 1

wanted this result?

 * { margin: 0; box-sizing: border-box; }.form1 { background: linear-gradient(to right bottom, deepskyblue, pink); margin: 10px; border: 1px solid black; padding: 50px 150px; display: flex; flex-direction: column; align-items: center; font-family: helvetica; font-size: 14px; }.form1 label { max-width: 300px; width: 100%; }.space:focus { outline-color: black; }.space { /*width: 300px;*/ max-width: 300px; width: 100%; }.submit { /*width: 30vw;*/ max-width: 300px; width: 100%; align-self: center; background: linear-gradient(to top left, rgb(255,105,200), aqua); border: none; border-radius: 20px; padding: 5px; font-family: verdana; font-weight: 600; }

 <div class="form1"> <label for="name">Name</label> <input class="space" type="text" id="name"><br><br> <label for="email">E-mail</label> <input class="space" type="email" id="email"><br><br> <label for="message">Message</label> <textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br> <input type="submit" class="submit" value="Send"> </div>

Answer 2

you can just add some css to the label, as you have provided input with a width of 300, give the same to label and it works.

 .form1 { background: linear-gradient(to right bottom, deepskyblue, pink); margin: 10px; border: 1px solid black; padding: 50px 150px; display: flex; flex-direction: column; font-family: helvetica; align-items: center; font-size: 14px; }.form1 label { display: flex; justify-content: flex-start; width: 300px; }.space:focus { outline-color: black; }.space { width: 300px; }.submit { width: 30vw; align-self: center; background: linear-gradient(to top left, rgb(255,105,200), aqua); border: none; border-radius: 20px; padding: 5px; font-family: verdana; font-weight: 600; }

 <div class="form1"> <label for="name">Name</label> <input class="space" type="text" id="name"><br><br> <label for="email">E-mail</label> <input class="space" type="email" id="email"><br><br> <label for="message">Message</label> <textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br> <input type="submit" class="submit" value="Send"> </div>