How do I align my label and input element contents on separate lines while maintaining centered alignments?
Question
I am trying to align my form contents so that each label falls on a separate line and the input content within the label falls in separate lines after the label element. Please help. I included an image link and my code in this question.
I would like my label to be displayed above the input elements, the input elements to have centered content (for example: radio type inputs to be aligned perfectly centered with their relative text description. If I have "male" as an option for a radio, I would like the input button itself to be aligned centered and even with the words "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>
1 answers
solution1
0 2022-08-10 18:07:34
Check this out!
.Your-choosen-label
{
display:flex;
justify-content:space-evenly;
align-items:center;
flex-direction:column;
}
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.