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;
}```
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>
Related
I have 2 questions really. How can I align my radio buttons and checkboxes to the left of my already centered form-group in css.They are currently all center, but I want the checkboxes and radio buttons to be aligned to the left, but still in center. Also how can I make my form take up the whole page with a scroll bar like the example I will provide. everything current just sits at the top of page. Please let me know of any questions, really am stuck here and just need a little nudge. Thanks.
Example: https://survey-form.freecodecamp.rocks/
.text-center {
text-align: center;
margin: auto;
}
.form-group {
text-align: center;
margin: auto;
}
.clue {
text-align: center;
}
.input-checkboxes {
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;
}
body {
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container {
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1 {
margin-bottom: 5px;
}
.checkbox,
.radio-button {
display: block;
}
.form-grou>.inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div class="form-group">
<label> Based on my portfolio/resume, would you say that I am job ready?<br/>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div class="form-group">
<p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
You gave the div with the radio buttons the class .form-group. This class has a property align-center if you remove that from the div the buttons will align to the left.
If you give the .text-center to the <p> the tekst will align center
.text-center{
text-align: center;
margin: auto;
}
.form-group{
text-align: center;
margin: auto;
}
.clue{
text-align: center;
}
.input-checkboxes{
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;}
body{
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container{
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1{
margin-bottom: 5px;
}
.checkbox, .radio-button {
display: block;
}
.form-grou > .inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey</title>
</head>
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div>
<label> <p class="text-center">Based on my portfolio/resume, would you say that I am job ready?<br/> </p>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div>
<p class="text-center" >What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea
name="comments"
id="comments"
rows="3"
cols="30"
class="input-textarea"
placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button
type="submit"
id="submit"
class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
Remove the css of .text-center and .form-group
I'm trying to find a way to line up the input boxes for Name, Email, Age. The boxes are lined up for name and email. However, how do I change the width or margin to line up the input box to match that of name and email.
Also, how do I make the option value box bigger that accompany "Which option best describes your current role" label?
I have tried to adjust the width, margin to try to get the box to line up to email/age however it does not work. It seems that when I do margin-left it moves the label further away from the input box.
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #a9d7d1;
margin: 50px 200px 20px 200px;
}
#Survey-form{
background-color: #f0f0f0;
text-align: center;
}
#Name{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Email{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
#Age{
text-align: left;
width: 200px;
height: 25px;
display:inline-block;
}
label[for=role]{
margin-left: -345px;
width: 40px;
select required {
width: 450px;
margin: 10px;
}
div{
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<!-- <p> -->
<div>
<br /> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</div>
<div>
<br /> <label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
</div>
<div>
<br /> <label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age">
</div>
<div>
<br /> <label for="role">Which option best describes your current role?</label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
<p>How likely is that you would recommend
<br>freeCodeCamp to a friend?
<br><input type="radio" name="recommend" class="recommend" value="Definetly"> Definetly
<br> <input type="radio" name="recommend" class="recommend" value="Maybe"> Maybe
<br> <input type="radio" name="recommend" class="recommend" value="NotSure"> Not Sure
<p> <label for="FCC">What do you like most in FCC: </label>
<select required>
<option value="selected disabled">Select an option </option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Community</option>
<option value="Open Source">Open Source</option>
</select>
<p>Things that should be improved in the future.<br />(Check all that apply):
<br /> Front-end Projects: <input type="checkbox" name="sports" value="Front-end Projects">
<br /> Back-end Projects: <input type="checkbox" name="sports" value="Back-end Projects" >
<br /> Challenges: <input type="checkbox" name="sports" value="Challenges">
<br /> Open Source Community: <input type="checkbox" name="sports" value="Open Source Community">
<br /> Gitter help rooms: <input type="checkbox" name="sports" value="Gitter help rooms" >
<br /> Videos: <input type="checkbox" name="sports" value="Videos" >
<br /> City Meetups: <input type="checkbox" name="sports" value="City Meetups" >
<br /> Wiki: <input type="checkbox" name="sports" value="Wiki" >
<br /> Forum: <input type="checkbox" name="sports" value="Forum" >
<br /> Additional Courses: <input type="checkbox" name="sports" value="Additional Courses" >
<p>
Any Comments or Suggestions?
<textarea rows="4" cols="44" name="comment" form="usrform">
Enter your comment here...</textarea>
</p><input type="submit" value="Submit">
</form>
</body>
</html>
The boxes should line up and I want to make the select an option box bigger for the label Which option best describes your current role?
Here you go, Wrap your input elements using wrapper .row then divide into two columns .right, .left set relevent widths accordingly and use display: inline-block; to create grid.
You can use ul to create radio and checkbox list like I did below and get rid of <br/>
.form {
max-width: 900px;
width: 75%;
padding: 10px;
background: #fff;
}
div.row {
display: block;
margin-bottom: 10px;
}
div.right {
width: 45%;
display: inline-block;
text-align: left;
vertical-align: middle;
}
div.left {
width: 30%;
display: inline-block;
text-align: right;
vertical-align: top;
}
.input-list {
display: block;
list-style: none;
padding: 0;
}
.radio-li, .checkbox-li {
display: block;
padding-bottom: 10px;
}
.radio, .checkbox {
float: left;
margin-right: 5px;
background: #000;
}
<div class="row">
<div class="left">
<label>Name:</label>
</div>
<div class="right">
<input type="text" name="name" class="input" placeholder="Enter your name">
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Which option best describes your current role?</label>
</div>
<div class="right">
<select>
<option value="selected disabled">Select an option </option>
<option value="Student">Student</option>
<option value="FullTimeJob">Full Time Job</option>
<option value="FullTimeLearner">Full Time Learner</option>
<option value="NotToSay">Prefer Not to Say</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">How likely is that you would recommend freeCodeCamp to a friend?</label>
</div>
<div class="right">
<ul class="input-list">
<li class="radio-li"><label>Definetly<input type="radio" name="recommend" class="recommend radio" value="Definetly"></label></li>
<li class="radio-li"><label>Maybe <input type="radio" name="recommend" class="recommend radio" value="Maybe"></label></li>
<li class="radio-li"><label>Not Sure <input type="radio" name="recommend" class="recommend radio" value="NotSure"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role">Things that should be improved in the future.(Check all that apply):</label>
</div>
<div class="right">
<ul class="input-list">
<li class="checkbox-li"><label>Front-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Front-end Projects"></label></li>
<li class="checkbox-li"><label>Back-end Projects: <input type="checkbox" name="sports" class="checkbox" value="Back-end Projects" ></li>
<li class="checkbox-li"><label>Challenges: <input type="checkbox" name="sports" class="checkbox" value="Challenges"></label></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">
<label for="role"> Any Comments or Suggestions?</label>
</div>
<div class="right">
<textarea rows="4" cols="30" name="comment" form="usrform">Enter your comment here...</textarea>
</div>
</div>
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
I have created a form that is aligned horizontally with the labels on top.
I had some difficulty aligning the = button, and I used a trick with   to align it. I couldn't find any better solution for this, is there something better to do?
I want to apply a border around the form and align it in the center of the page.
I have tried several things, like placing it inside a table, or using another div but with no success.
This is my code until now (I have not included the script for the calculations):
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</div>
</form>
</body>
</html>
You can create a wrapper DIV around it and make that a flex container, using the following settings to achieve the centering both horizontally and vertically:
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
padding: 10px;
border: 1px solid #ddd;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div style="float:left;margin-right:20px;">
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div style="float:left;margin-right:20px;">
<label for "O">Operator</label>
<select type="text" name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div style="float:left;margin-right:20px;">
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div style="float:left;">
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div style="float:left;">
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</div>
</body>
</html>
What you might do is give the form a width and use margin: 0 auto to align it in the middle and set overflow: auto;
For example:
input, label{
display:block;
}
label{
text-align:center;
margin-bottom:4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right:20px;
}
<!DOCTYPE html>
<html>
<head>
<title> Calculator</title>
<style>
input,
label {
display: block;
}
label {
text-align: center;
margin-bottom: 4px;
}
form {
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
}
form div {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="text-align:center">Calculator</h1>
<form name="CL">
<div>
<label for="N1">X</label>
<input type="text" name="N1" id="N1">
</div>
<div>
<label for="O">Operator</label>
<select name="O" id="O" style="width:50px">
<option value="0"> +</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
</div>
<div>
<label for="N2">Y</label>
<input type="text" name="N2" id="N2">
</div>
<div>
<label>  </label>
<input type="button" value="=" onclick="calc()">
</div>
<div>
<label for="R">Result</label>
<input type="text" name="R" id="R">
</div>
</form>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="utf-8">
<title> Contact page </title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li> Index </li>
<li> Learning Log </li>
<li> Contact </li>
</ul>
</nav>
</header>
<h1> Contact page </h1>
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label >first_name*: <input type="text" name="first_name*" required></label></p>
<p><label >last_name*: <input type="text" name="last_name*" required></label></p>
<p><label >phone_number*: <input type="number" name="number*" required></label></p>
</fieldset>
<fieldset>
<legend>Radio</legend>
<label > contact_permission* </label><br>
<input type="radio" name="rating" required value="1 hour"> Yes <br/>
<input type="radio" name="rating" value="2 hours"> No <br/>
</fieldset>
<fieldset>
<legend>Dropdown List</legend>
<label>best_time_to_contact*: </label>
<select required>
<option value="">Please Select</option>
<option value="1"> Morning</option>
<option value="2"> Afternoon</option>
<option value="3"> Evening</option>
</select>
</fieldset>
<fieldset>
<legend>Check box</legend>
<label > how_can_i_contact_you </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
</fieldset>
<br>
<input type="submit" name="Submit" value="Submit">
</form>
</div>
</body>
</html>
Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. https://jsfiddle.net/tyvx60zc/ here is a jsfiddle of the code with my external css. any help would be greatly appreciated
label {
display: block;
text-align: initial;
}
label>input {
float: right;
}
Remove text-align: center; from the wrapper, and instead use:
input {
display: inline-block;
position: relative;
}
label {
display: inline-block;
width: 200px;
text-align: right;
}
https://jsfiddle.net/abalter/tyvx60zc/1/
FWIW, I also prefer using <label for="...
Add the following CSS into your CSS file:
p label{
width: 35%;
display: inline-block;
text-align: left;
}
p label input{
float: right;
}