[Solved] Survey form help - Centre submit button independently of CSS grid columns

#1

Hello,

I am having difficulty placing my submit button in the centre of my survey form. It appears to be confined to the spacing of one of my grid columns. I was thinking that there was perhaps a way to treat it independently of the established grid columns, however, I have yet to figure out how to do this.

Any help would be greatly appreciated!

Link to the form: https://codepen.io/jjeva/full/rbYdQd

#2

You could make the footer div span two columns instead of one. https://cssreference.io/property/grid-column/

Then just center your button with text-align:center;

#3

The other solution would be to put a form content inside another div like this:

  <form id="survey-form">
  <div id="form-container">
    ...form content
  </div>
    <div class="footer">
      <button id="submit" type="submit">Submit</button>
    </div>
  </form>

But keep the footer class container inside form of course. Then apply the css for the #form-container:

.form-container {
   display: grid;
   grid-template-columns: 50% 50%;
}

And align the content. For me it worked well :wink:

#4

Worked great. Thanks!

#5