You are viewing limited content. For full access, please sign in.

Question

Question

Centre the Submit and Save as Draft Buttons on the Same Line Horizontally

Forms Version 10
Updated June 10, 2021
asked on June 10, 2021

Hi,

I'm not much of a CSS wizard, and I can't seem to get the Submit and Save as Draft buttons to line up horizontally and centre at the same time.  I've tried many variants of the following but all I can seem to do is get them centered horizontally but on top of each other.  Any idea what I'm doing wrong here?

div.btn-wrapper {display: block; padding-top: 15px;}
.Submit {display: block; margin: auto;}
.draft-btn {display: block; margin: auto;}

It seems the Draft button is in a different DIV than the other action buttons?

0 0

Answer

SELECTED ANSWER
replied on June 10, 2021 • Show version history

To get them like the below screenshot, use the following CSS:

.btn-wrapper {
width: 50%;
padding-top: 15px;
text-align: center;
}

 

If you want to make the buttons closer together, add the following CSS:

.Submit{
  margin-left: 50%;
}

.draft-btn{
  margin-right: 50%;
}

This will make them look like this:

0 0
replied on June 10, 2021

Well that just worked perfectly!  Thanks for the help Stephen!

1 0

Replies

You are not allowed to reply in this post.
replied on June 10, 2021

If you want something that looks like the below screenshot, then use the following code:

 

.btn-wrapper {
    display: block;
    margin: auto;
    padding-top: 15px;
  text-align: center;
}

 

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...