https://codepen.io/kittles04/pen/wOGWxL

Please review my survey form project. Im having trouble:

  1. centering my submit button at the bottom
  2. Making the background image more opaque
  3. Centering the title and formatting it.

Thank you for reviewing.

Kerriann

So to start: don’t set your containing element to a fixed 1000+ pixels, it will throw off the appearance of ‘centering’ anything.

Second, watch your tag nesting – the container div (which is to contain the form) is closed before the form is closed. There is a weird nesting thing going on, and while it may not break things, it sure doesn’t help.

Third, give the submit button a couple different attributes: if you set it to display: block; you can then use margins to center that within the div. Same could probably be applied to the title.

  1. Give your input
display: block;
margin: 0 auto;

Buttons by default are inline-blocks so they only take up space of their content. Therefore giving block display stretches the container of current element horizontally. Then it’s simply centering it giving same margins on both sides.

  1. Try changing your background image prop in html tag to
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://www.additudemag.com/wp-content/uploads/2016/11/Adult.Health.Best_ADHD_blogs.Article.4842.woman_typing_laptop.ts_501891056-3.jpg);

There are multiple ways to do this but this is probably the easiest way. Explanation here.

  1. simply give #title text-align:center, give whatever styles you want to format it.
1 Like

thanks everyone!! It looks much better:

1 Like