Center my input type-survey form

Center my input type-survey form
0.0 0

#1

Tell us what’s happening:
Unable to center my input type

Your code so far

<body>
  <h1 id="title">
  Survey Form
</h1>
  <h3 id="discription">Let us know how we can serve you better</h3>
<form id="survey-form" class="col-25">
  
  <div >
    <label for="name" >Name</label> </div>
    <div><input type="text" name="name" id="input"          value="Enter your name"></input></div>
  <br><br>
<label for="email">Email</label>
<input type="email" name="email" id="ff" value="Enter your valid email"></input>
  <br><br>
<label for="age">Age</label>
<input type="number" name="age" id="ff" placeholder="age" min="0" max="100"></input><br><br>
</div>
<div>
<label for="cars">Kindly choose your best car</label>
<select name="cars" id="ff">
  <option value="volvo">Volvo</option>
  <option value="toyota">Toyoto</option>
  <option value="kia">Kia</option>     
</select>
</div>
<div>
  How likely that you will<br> 
  recommend our products to your friend?
  <label for="dicrcar">Definately</label>
  <input type="radio" name="discrcar" id="disccar" value="Definately"</input><br>
  <label for="maybe">May be</label>
  <input type="radio" name="maybe" value="maybe"</input><br>
  <label for="notsure"> Not sure</label>
  <input type="radio" name="notsure" value="notsure"</input>
</div><br>
<div>
  <label for="FCC">What do you like most in FCC:</label>
  <select name="fcc" id="fcc">
    <option value="select an option"> select an option</option>
    <option value="challenges">Challenges</option>
    <option value="project">Project</option>
    <option value="community">Community</option>
    <option value="open source">Open Source</option>
  </select>
</div>
<div>
  <label for="improve" id="improve">Thinks that should be improved in the future</label>
  <input type="checkbox" name="improve" id="improve">Front-end Project</input><br>
<input type="checkbox" name="bk" id="improve">Back-end Project</input><br>
<input type="checkbox" name="da" id="improve">Data Visualization</input><br>
<input type="checkbox" name="cl" id="improve">Challenges</input><br>
<input type="checkbox" name="op" id="improve">Open Source Community</input><br>
<input type="checkbox" name="gt" id="improve">Gitter help rooms</input><br>
<input type="checkbox" name="vd" id="improve">Video</input><br>
<input type="checkbox" name="city" id="improve">City meetups</input><br>
<input type="checkbox" name="wk" id="improve">Wiki</input><br>
<input type="checkbox" name="ad" id="improve">Additional Courses</input>
</div>
<div>
  <label for="moreinfo" id="moreinfo">Any comments or suggestions</label>
  <input type="textarea" id="moreinfo" value="Enter comment here"></input>
</div>
<botton>Submit</botton>
</form>
</body>

CSS CODE

body{background-color: green;

}
#title{
  text-align: center;
}
#discription{text-align: center;
}

#survey-form{
   border-radius: 5px;
  background-color: #f2f2f2;
  padding: 50px;
  
}
/* Floating column for labels: 25% width */
.col-25 {
  float: center;
  width: 50%;
  margin: auto;}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
input[type=text], input[type=radio]{
    text-align:center;
    display: block;
    margin: 0 0 1em 0;
    width: 90%; 
    border: 1px solid #818181;
    padding: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form


#2

Do you want to center text within your inputs or you want to center your fields?
Maybe next link can help you: MDN article: text-align.


#3

Thank you for your response.

I want the label to align left while the input field align right

Thanks


#4

You have to play with width property. Aplly it to your label and input if you won’t use flexbox or grid or floats.
Don’t forget about the box model. label is inline elements until you set it another display property.
Read this W3C CSS display property.


#5

Thank you so much.

I was able to center the input field, but i think i still need to work on aligning the label and the input field.

Kindly view my project below;


#6

There is two property you have to use to make what you want to make: display and text-align.
If I understand correctly you want to do this:
2018-07-12%2020_06_17-FirstProject

Work with the properties I’ve wrote above and apply it to your labels and inputs. If you get stuck learn more about both of this properties.

Another things. Label element in HTML can take an attribut for with id of input element to which he belongs.
For example:

<label for=“myNameIsGreat”>
<input id=“myNameIsGreat” type=“text” name=“name”>

Check yours labels and inputs and fix this.

Notice input elements are self closing elements. This means they shouldn’t have closing tag like p,h2,label etc.

Slow down for a while and take a moment to take a peek on your HTML and dive deeper into it. When your HTML will be more clear and you’ll understand it better then CSS will be more understandable for you.

It is not hard to learn HTML (use W3C HTML course). But if you willn’t learn it then you’ll stuck at very simple problems.

PS> When somebody says “it’s simple” it means it is now simple for him. But when you learn something new it is may be hard sometimes and can take extra time to understand basics for everyone. If you get stuck just take a break and relax.

Sorry for long post but I think it’ll help you. I hope so.
See ya!


#7

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#8

Thank you. I am encourage by your statement.

I am a system administrator, and i want to really learn how to code now.

Your advice is noted.


#9

Hi Friend,

Just want you to review my Technical Documentation site…https://codepen.io/ashamide/pen/QBEbXa


#10

hi there.

  1. The font of your menu is small and hard to read. And items of the menu is too close to the left side of the window. Use relative units to make your text awesome at any viewport and any device. You can start to learn about responsive CSS units at FCC Guid: CSS-fonts.
    image
  2. The page looks like responsive but your images are not. Make your images as blocks. Read about block model at FCC Guid: CSS-Layouts-Display Property.
  3. Your HTML looks a little mess. Does it a header or a plain text? Why didn’t you close the p tag? You do not have to close p tags and each browser will build your HTML document but it is recommended to close all tags because at least your code will be read by other programmers.
  4. Your tables are not responsive too.

Please fix the stuff I’ve wrote above and your page will look much better;)