How to center the NEXT page button on the form

To Whom:

Some of the alignment 'challenges' I'm experiencing with JotForm have to do with rogue insertions of HTML code that I don't know how they got there.  In the example from the attached image, my Next Page nav button is skewed to the right (even though the alignment property is set to "center") because of this container object that's residing on the page.  When I view the form in Chrome and simply delete the line from that spot, everything aligns perfectly, but I can't figure out a way to remove this in the Form Designer CSS editor.

The overall question is to how to address an instance of a form object and not affect other usages of it.

Thanks!

The hidden page break BACK button was pushing the NEXT button more to the right in the form.

to workaround this, try adding the next CSS codes instead.

#form-pagebreak-next_43 {

    margin-left: -115px !important;

    width: 195px !important;

}

Result:

Let us know if this did not work.

Hi Jonathan:

Your code brought back the Plan Your Conference button closer to center, but as you can see by the screen cap, not far enough.  I understand that I can play with the values in the code until I get it just right, but I am wary of solutions that solve problems with specific sizing parameters.  This means that I'm really not learning what is causing the problem in the first place, and the next time it comes up, I'm going to have to go back through the same extensive exercise of tweaking the sizing settings.

Isn't there a way of directly addressing this DIV line in the code, or at least, rewriting the page break element so that the contents of the container are perfectly centered?

Thanks.

I wouldn't refer to it as a problem exactly since those are back and next buttons of the page break and their default position is left side of the form, like in this example:

So if you want to reposition them (move them around), a CSS must be used. This guide might help: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names  so you can get the ID of the field that you want to adjust, then you can apply the CSS code like my colleague provided.

If you need any further assistance please let us know.

Thank you!

Hi Nik:

Yes, I got the button to "move around" as Jonathan provided, but what I was wondering is why I have to use pixels and not something like align: center.  Not being able to precisely align the buttons would be a disadvantage when viewing later on larger screens, where the imprecise granularity would be exposed.  If there's no way to do this, however, then I've got a good workaround for now, so thanks to you and Jonathan.

I understand, but I'm afraid that there is no better way to do that.

If you have any further questions or if you need any assistance please let us know, we'll be glad to help.

Thank you!