Docs

[leverpunch]

Hi Team,

After searching through the forum, I’m still facing an issue with aligning my elements vertically in a row (please see screenshot – “X Theme – Alignment Issue).

I applied the following codes and methods:

1. Style CSS
.center-custom-image {
float: none;
display: inline-block;
vertical-align: middle;
}

.x-section .x-container.marginless-columns .x-column {
vertical-align: middle !important;
}

.x-section .x-container.marginless-columns .x-column .x-img{
margin-bottom: 0;
}

2. Apply “center-custom-image” to the class of every image

Is this the best way to achieve vertical center alignment? The image doesn’t seem to be totally centralised (especially on mobile – not center aligned horizontally).

Please advise.

Thanks!
Alvin

[leverpunch]

Here’s the link to the page: http://bit.ly/1rY33eq

[Friech]

Hi There,

Thanks for writing in! Add a class mbn to your Image element, and adjust the top margin to get the desired alignment.

Or place a Gap element on top of the image.

Hope it helps, Cheers!

[leverpunch]

Hi,

I’m facing difficulty aligning all my elements in a column to align vertically and horizontally. I have no wish to add padding in order to achieve that.

Is there a way to create a universal class such that I can just apply it to those columns I wish to centralise the elements?

Please advise.

Thanks!
Alvin

[leverpunch]

This reply has been marked as private.

[Joao]

Hi There,

You can add this code to your column Style Box

text-align: center;

Please see img attached.

Hope that helps,

Joao

[leverpunch]

Hi Joao,

Thanks for the reply. It doesn’t work.

Please advise.

Alvin

[Joao]

Hi Alvin,

I am sorry my bad, I didn´t realize you were using Virtual Composer not Cornerstone.

I Can see on your code that your text is aligned right, and the button also, You can try setting the aligndment of both for center and your website will look like the picture attached:

If you cannot figure out how to do it inside Visual Composer,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

So we will be able to have a quick look and help with the issue, please check the results on the image and see if you will be happy with that.

Thanks,

Joao

[leverpunch]

This reply has been marked as private.

[Joao]

Hi There,

I have changed the aligned of your text and button to center.

Please have a look.

Let us know if you would like to adjust something else.

Joao

[leverpunch]

Hmmm you ignored my previous message.

I want the text to be aligned right, but the entire text element to be aligned horizontally & vertically center.

[Joao]

Hi there,

I am sorry, I didnt ignore your message I just didnt understand it, I apologize.

I still don´t understand what is your goal, could you please make a mock-up or sketch of your goal so we can better help you achieving it, sometimes is? I am sure it is possible once we understand what you want 🙂

Thanks,

Joao

[leverpunch]

This reply has been marked as private.

[Paul R]

Hi Alvin,

To achieve that, you can add this under Custom > CSS in the Customizer.

@media (min-width: 767px) {
.v-align-section {
    position:relative;
}

.v-align-section .x-column.x-1-2.v-center {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top:-94px;
}
}

Hope that helps.

[leverpunch]

Thanks! It looks awesome on desktop, but not mobile. How can I add a gap between the image & text? See attached screenshot.

Also, how I can apply this universally? – if i have other 2-column rows that I wish to centralise the text element vertically & horizontally?

Would be awesome if you can explain to me how that set of codes you provides works.

Thanks!
Alvin

[Author]

Posts