I need assistance with aligning the contents of my form. I want each label to appear on a separate line with the input content aligned below the label. Can someone help me achieve this? I have shared an image link and my code for reference.
My goal is to have labels displayed above the input elements, with the content centered. For example, radio buttons should be perfectly centered with their text description. If "male" is an option for a radio button, I want the input button to be centrally aligned with the word "male".
html,
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: block;
}
div {
display: block;
}
.form-group {
margin: 0 auto;
}
.container {
max-width: 600px;
margin: auto;
}
form {
height: 100%;
width: 100%;
display: block;
}
label {
padding: 0.25rem;
display: flex;
width: 100%;
}
input[type="radio"],
label {
align-items: center;
}
input {
width: 100%;
display: block;
}<body>
<div class="container" style="text-align: center;">
<h1 id="title">Studentas Survey Form</h1>
<p id="description">Thank you for taking time to complete this survey</p>
</div>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label">Enter your name
<input type="text" id="name" placeholder="Enter your name" required></input>
</label>
<label id="email-label">Enter your Email
<input type="email" id="email" placeholder="Enter your email" required></input>
</label>
<label id="number-label">Enter your age
<input type="number" id="number" min="1" max="99" placeholder="Age" required></input>
</label>
<label>Favorite subject?
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">History</option>
<option value="2">Math</option>
<option value="3">Science</option>
<option value="4">English</option>
</select>
<label>
<label>What is your gender?
<input type="radio" name="gender" required>Male</label>
<input type="radio" name="gender" required>Female</label>
</label>
<label>What do you like about school?
<input type="checkbox" value="lunch" required>Lunch Time</input>
<input type="checkbox" value="social" required>Social Interaction</input>
<input type="checkbox" value="work" required>Course Work</input>
<input type="checkbox" value="home" required>Going Home</input>
</label>
<label>What are your thoughts on this survey?
<textarea></textarea>
</label>
<input type="submit"></input>
</div>
</form>
</div>
</body>