I'm stuck: Centering elements in Survey Form?

I'm stuck: Centering elements in Survey Form?
0.0 0

#1

Been using the past 2 days on figuring out how to center stuff, but I just keep running into a “wall”, I’ve watched multiple videos of how to align the elements of a survey form vertically and so on. However, I just don’t get it, everytime I center one thing, another element will be pushed to hell when I re-size the browser size, all sorts of things like that keeps happening.
Here is my code, if anyone is able to help me, I would really appreciate it. Code is messy btw, and I’ve passed this “survey form” once, but I wanted to go again, because I didn’t even end up finding out how to center all of the different elements without ruining everything for other sizings etc…

This time, a weird amount of space appeared in the bottom part of the page, can’t figure out where it comes from…


#2

Hey,

First of all to fix a mistake in your code. From what I can see you’re nesting the row elements.

This is some of your code:

<div class="row">
      <div class="labels">
        <label id="email-label" for="email">* Email:</label>
      </div>
      <div class="inputs">
        <input id="email" type="email" placeholder="Email" required="">
      </div>
      
    <div class="row">
      <div class="labels">
        <label id="number-label" for="number">* Age:</label>
      </div>

As you can see you have a div class=“row” inside another div class=“row”.

I’m pretty sure that’s a mistake.

Fix that and the rows shouldn’t be getting mixed up.


But there are bigger problems here. The method you're using to center stuff is just not how it's done. It's very "hacky" as they say. That's fine because you're doing what you can, but if you're serious about web development you'll need to learn proper ways to do stuff.

I highly recommend you expand your foundation with learning outside of FCC. FCC is not good at all for learning, but is good for practice. The tutorials I did (which I found amazing) were the MDN web development tutorials (the best) and the Udemy Web Developer Bootcamp. Go through those otherwise you’ll always have issues like this where you won’t know the solution.


To answer your particular question, I recommend using flexbox.

Try something like:

<div class="row">
    <label for="labelID"> This is a label:</label>
    <input type="text" name="labelName" id="labelID>>
</div>

CSS:
.row {
display: flex;
justify-content: center;
}

If it doesn’t make sense to you why that works, I recommend going through those courses.


TLDR: Fix the nesting of the divs with class=“row”, they shouldn’t be nested. Go through some courses like MDN and Udemy Web Developer Bootcamp because it seems your understanding is quite lacking overall, and you’ll come across tons of issues you won’t be able to solve otherwise.