Is it possible to vertically align a button in the centre of a column?

Support
#1

Hi, I’m working on a page and I’ve got a row with 4 columns: column 1 has a gap, column 2 has an image, column 3 has a button and column 4 has a gap. I’d like the button to be vertically aligned in the centre of the column if that’s possible, as it looks a bit odd where it is at the minute. I’ve done a rough mockup for your reference.

I’ll put the URL in a secure note as it’s on a temporary page link.

Thanks!

#2

Hi @core365,

Please add this element CSS to your button:

$el.x-anchor.x-anchor-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    margin: 0;
}

Hope it helps :slight_smile:

#3

Hi, that’s excellent, thank you!

Is it possible for the button to not fill the width of the column but to be aligned in the centre of it? I’ve tried to do it myself by removing the width from the CSS, but it then just aligns to the left, even though I’ve set the paragraph spacing on the column to be centred.

Thanks!

#4

Hi @core365,

In this case, please update the previous CSS to this:

$el.x-anchor.x-anchor-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    margin: 0;
}

Hope it helps :slight_smile:

#5

Hi, sorry to be a pain, but the other CSS you gave was great apart from the button filling the width, as the updated CSS you gave me has lots more extra space either side of the text on the button instead of the button fitting to the text - if that makes sense! I’ve uploaded a screen grab to show this. If possible, I’d like the button to be positioned as it is vertically, but then be centred horizontally in the column without making the button any bigger than it needs to be!

Thanks!

#6

Hi,

You can try adding a class to your column element where your button is.

Then add this in Theme Options > CSS

@media(max-width:767px) {
    .my-column {
        text-align:center;
    }

   .my-column  .x-anchor-button {
        position:static;
}
}

Hope this helps

#7

That’s great, thanks! I just had to add !important to the end of ‘position:static;’ and then it was spot on!

Thanks for all your time and help with this, I really appreciate it!

Cheers!

#8

Glad we were able to help :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.