How to align the checkbox with the label within the fieldset?
Question
Newbie coder here working on a project that's making me insane. I have tried everything I can think of. I know it has to do with the width but I can not figure it out so that all the content aligns. I am looking to align the label with the checkbox input within the fieldset and have it centered. I tried removing the 100% width, using flex display, changing the display to inline-block, and other various things but with no success- Any help would be GREATLY appreciated!
<div class="container">
<h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
<p>Please fill out the form below to contact us</p>
<form action="process.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="state-select">Choose Your State:</label>
<select name="state" id="state-select">
<option value="">Required</option>
<option value="ct">Connecticut</option>
<option value="ny">New York</option>
<option value="ma">Massachusets</option>
<option value="nh">New Hampshire</option>
<option value="me">Maine</option>
</select>
</div>
</form>
<fieldset>
<legend>Newsletter</legend>
<div>
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</section>
</div>
CSS
#contact-form .form-group {
margin-bottom: 20px;
}
#contact-form {
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea {
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: #12cad6;
}```
1 answers
solution1
0 2020-02-06 00:14:08
Add a class to the div that contains the label and checkbox
<div class="subscribe-news__container">
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
.subscribe-news__container {
display: flex; // this will fix it you may need to add some margin-left to the label
justify-content: center; // this will center horizontally within the div the page when using flex
align-items: center; // this will center your items vertically when using flex
}
I also suggest looking into some flex options like justify-content, and align-items as well. They are explained above.
You are also doing a lot of selections with ID's I would suggest using classes instead.
Classes are meant to be reused while ID's are not. This also plays into issues with accessibility as duplicate ID's can become a problem.
I hope this helps :)
Full Code I Tested with. The style tag is only included for the sake of being able to test quickly on my end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#contact-form .form-group {
margin-bottom: 20px;
}
#contact-form {
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea {
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: #12cad6;
}
.subscribe-news__container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
<p>Please fill out the form below to contact us</p>
<form action="process.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="state-select">Choose Your State:</label>
<select name="state" id="state-select">
<option value="">Required</option>
<option value="ct">Connecticut</option>
<option value="ny">New York</option>
<option value="ma">Massachusets</option>
<option value="nh">New Hampshire</option>
<option value="me">Maine</option>
</select>
</div>
</form>
<fieldset>
<legend>Newsletter</legend>
<div class="subscribe-news__container">
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</section>
</div>
</body>
</html>
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.