Centering Survey Form using pure CSS

I’ve been stuck on this project for two days now trying to understand how I can center my form and title. I honestly don’t know how I can center my form or what tags to use to start experimenting with my code. Can anyone give me any CSS tag suggestions or resource I can review to center my forum? I want it to look like this. Here is my code so far.

<!DOCTYPE html>

<html lang="en-US">
	
	<head>	
		<meta charset="utf-8">
		<title>FreeCode Camp Survery</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<meta name="description" content="This is a survery">
		<meta name="keywords" content=>
		<meta name="arthur" content="Gregory Shavers Jr">
	</head>


<body style="background-color: orange">

	<div>
		<h1 id="title">Software Engineer Career Survey</h1>

		<p id="description"> A career track survey for Software Engineers</p>

		<div>
				<form id="survey-form">
					<label id="name-label" for="name">Name</label>
					<input 
							id="name" 
							type="text" 
							name="name"
							placeholder="Name?" 
							required 
					>		
					<label id="email-label" for="email">Email</label>
					<input 
							id="email"
							type="email" 
							name="email" 
							placeholder="Email address?"
							required
					>	
					<p></p>
					<label id="number-label" for="age">Age</label>
					<input 
							id="number" 
							type="number" 
							name="age" 
							min="1"
							max="99" 
							placeholder="Age?"
							required
					>

					<p></p>
					<label for="dropdown">What type of role do you want?</label>
				<select id="dropdown">
					<option value="Frontend Engineer">Frontend Engineer</option>
					<option value="Backend Engineer">Backend Engineer</option>
					<option value="Full-Stack Engineer">Full-Stack Engineer</option>
					<option value="Mobile Engineer">Mobile Engineer</option>
					<option value="Software Engineer">Software Engineer</option>
					<option value="Principal Engineer">Principal Engineer</option>
				</select>
					<br>
			
					<p>Best describe your level of experience.</p>
					<input type="radio" id="senior" name="answer" value="senior">
					<label for="senior">Senior Level</label><br>

					<input type="radio" id="middle" name="answer" value="middle">
					<label for="middle">Middle Level</label><br>

					<input type="radio" id="entry" name="answer" value="entry">
					<label for="entry">Entry Level</label><br>
			

			
					<p>What is your future career plans?</p>

					<input type="checkbox" id="work" name="work" value="work">		
					<label for="work"> Work for a company.</label><br>
					<input type="checkbox" id="business" name="business" value="business">
					<label for="business"> Start a business.</label><br>
					<input type="checkbox" id="freelance" name="freelance" value="freelance">
					<label for="freelance">Work in Freelance development.</label><br>
			


			
					<p></p>
					<label for="comments">What is your goal as a developer?</label>
					<br>
					<textarea id="" rows="15" cols="50"></textarea>
					<br>
					<input id="submit" type="submit" name="submit">	
			</form>				
		</div>
	</div>
</body>




<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</html>

Can we see your CSS so we know what you have tried and know a little more about how you have styled the rest of the elements? If you have it on Codepen a link would be nice as well.

Did you try looking at the code for the example project?

You can give the form a container and center it using margin auto. The content inside the form will still be left-aligned and you need to make a distinction between the form element being centered and its content. If everything inside the form is left aligned and nothing is 100% width it’s kind of hard to see that the form is actually centered because its content will be off to the left side. If you give the form a background color it might be easier to see.

To center the title you can use text-align: center.

<div class="container">

  <h1 id="title">Software Engineer Career Survey</h1>
  <p id="description"> A career track survey for Software Engineers</p>
  
  <form id="survey-form">
    /* the rest of the HTML */
  </form>
  
</div>
.container {
  max-width: 980px;
  margin: 0 auto;
}

form {
  background: orangered;
}

#title {
  text-align: center;
}

I didn’t even know you could even look at the project code. lol Thanks for the hint. I’m also looking at Flexbox theory and seeing what I can do from there. I’ll respond to this thread when I have more questions. Thank you.

Okay this is what I have so far. I’ve meet all the criteria of the assignment, but I’m trying to better understand the box model more and centering my elements neatly on the page. I’m having trouble aligning my select box to left and my select label also to the left. The select box should be evenly labeled like the other boxes. Below is my code pen. Any suggestions?

P.S. Me playing with padding and margin hasn’t really helped…

https://codepen.io/gregoryshaversjr/pen/XWmzYEX?editors=1100

I figured it out. :slight_smile:

I would suggest you stack the labels and inputs, except for the checkbox and radio inputs. Using inline-block and widths is bound to be finicky and it really isn’t the best layout for a form anyway.

Code example
<form id="survey-form">

  <div class="form-group">
    <label id="name-label" for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name?" required>
  </div>

  <div class="form-group">
    <label id="email-label" for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email?" required>
  </div>

  <div class="form-group">
    <label id="age-label" for="name">Age</label>
    <input type="number" name="number" id="number" placeholder="Age?" required>
  </div>

  <div class="form-group">
    <label class="selectLabelRow" for="dropdown">What type of role do you want?</label>
    <select class="select-row" id="dropdown" name="role" required>
      <option disabled selected value>Select an option</option>
      <option value="Frontend Engineer">Frontend Engineer</option>
      <option value="Backend Engineer">Backend Engineer</option>
      <option value="Full-Stack Engineer">Full-Stack Engineer</option>
      <option value="Mobile Engineer">Mobile Engineer</option>
      <option value="Software Engineer">Software Engineer</option>
      <option value="Machine Learning Engineer">Machine Learning Engineer</option>
      <option value="Principal Engineer">Principal Engineer</option>
    </select>
  </div>

</form>
* {
  box-sizing: border-box;
}

#survey-form{
  background-color:green;
  max-width: 720px;
  margin:0 auto;
  padding: 40px
}

/* this should only be applied to the labels and input as needed
   it will not work for the checkbox and radio buttons part of the form
*/
label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 10px;
}

select {
  width: 100%;
  padding: 10px;
}

.form-group {
  margin-bottom: 15px;
}

What do you mean by stack the label and input? What css rule is that?

You’re referring to this…if so I’ll use this next time. I’m moving to the next project. CSS is allot pain…lol

https://www.w3schools.com/howto/howto_css_stacked_form.asp