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

asked on June 10

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 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

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

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.