Help with form submit button

Hello!
I am playing around with forms to understand how they work. I have written this code and I am trying to align the submit button with the other text containers. How can I do this? Here’s the code if someone would like to help me: https://codepen.io/Alicinetto/pen/jdzRbm

Right now the submit button is aligned at the center. Please ignore for now the radio button alignment…that I still need to study how to make it look better :slight_smile:

Thanks!

Right now your labels (80px) and inputs (300px) are located in the middle of container. So one way would be to give .submit container max-width of 380px and padding of 80px and put it in the middle:

/* reset browser styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.submit {
  margin: auto;
  max-width: 380px;
  padding-left: 80px;
  text-align: left;
}
1 Like
.submit {
  margin-right: 50%;
  margin-left: 10%;
}

Thanks @jenovs. There are two things I don’t understand though (I have started coding a few weeks back and I find it hard to understand this box model thingy :-):

  1. What does margin:auto means in this context?

  2. Why did you add this code: /* reset browser styles */

  • {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

Thanks!
Alice

1. margin: auto centers the element by splitting free space between left and right margin (it sets top and bottom margin also to auto, but they are 0 anyway). https://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin0-auto

2. Every browser have some defaults CSS styles (paddings, margins, font-sizes etc). We use resets to remove them so they don’t interfere with our styles and to have similar output in all browsers.
https://css-tricks.com/reboot-resets-reasoning/
Using * is not the best option, but it’s usually “good enough”.

As for the box-sizing: border-box, property, there’s a good explanation for it at https://css-tricks.com/box-sizing/ ; the gist is that with border-box, borders and padding shrink the content inside the box, but don’t add to its overall size, whereas they do in the content-box model.

The consensus among web developers is that border-box is a lot more sane than the default of content-box, which tends to lead to situations like this: https://teeplusplusclth.com/products/css-is-awesome-mug

But for the div I have set text-align: center
div{
margin-top: 30px;
text-align: center;
}

Since the div is a parent container of the submit button, shouldn’t the submit button inherit this property and be centered already?

Yes, and it its. But you don’t want it to be centered, you want it to align with input fields, correct?

That is correct but in my mind I thought I could skip the margin:auto, which centers the element, as the submit button is centered to begin with (being child element of the div). Thanks

Here margin: auto is not used to center the button, but the div containing the button

1 Like

Also, margin is not an inherited CSS property. Elements only inherit a subset of CSS properties, not all of them.

Ahhhhhh right it makes sense now, I was really confused before! Thanks @jenovs

@jenovs I have been working on this a bit more and now I am trying to have the fieldset aligned as well with the other text containers. I don’t want to remove the margin:auto as it is convenient to have it for responsive purpose but I am stuck. I thought I could move the fieldset 40px towards the right and have it aligned but I don’t know how to do it (padding doesn’t move the fieldset). Here is the code https://codepen.io/Alicinetto/pen/jdzRbm
Thanks

You need to add padding-left: 80px to wrapping div. Give it a class so you can target it specifically.

Why is it 80 and not 40px?

Labels have width of 80px.

1 Like

Thanks again for your help!