Vertically centering elements

Support
#1

Hi there, I would like to know how to vertically center elements like images and buttons.
Thanks!

#2

Hi,

To vertically center your elements, you can add the code below in Theme Options > CSS


.home .vc_btn3-container {
     margin-bottom:0;
}

.home .x-content-band.marginless-columns .x-container .x-column {
     vertical-align:middle;
}

Hope that helps.

#3

Hi Paul, that worked, but I only want it to affect certain things, and now rows, colums etc are centered as well. If you have a look on my site even the side bar is vertically centered which is something I do not want. Please can you offer a solution for this?
I would also like to know how to horizontally centre images, if you have a look using the mobile emulator in chrome you will see the images that I would like to centre.
Thanks!

#4

Hey James,

You need to assign a Class to your section and then replace .home in the code to your class like .my-class

Centering images could be achieved in different ways but if the only element in your column is the image, you can set the Text Align option of the column to center.

Thanks.

#5

Hi Christian,

I tried to apply the class, but it didn’t seem to work. Perhaps I am doing something incorrectly? Could you please explain in a bit further detail how to accomplish this?

Also, there is no option for text align in the column that I can see. Can you please show some screenshots of this?

Thanks!!

#6

Hi @thurlowjp,

Try using this code below.

.x-content-band.marginless-columns .x-container .x-column.classone{
    vertical-align:middle;
}

To center horizontally in columns, you can check the screenshot below:

Hope it helps.

Let us know how it goes.

Thanks.

#7

Nice! the vertical centering works now :smiley:
I still cannot see the option for text align like the screenshot. FYI I am using visual composer not cornerstone, I think the screenshot may be for that instead?

#8

Hi @thurlowjp,

Happy to hear that it is working already.

In regards to the screenshot of visual composer, you might want to check the link below.

https://wpbakery.atlassian.net/wiki/spaces/VC/pages/18907149/How+to+control+element+and+column+vertical+alignment

Feel free to ask us again.

Thanks.

#9

Hey Nico,

I simply do not know where you are accessing the above menu from. I cannot see it anywhere, perhaps I have missed it, but could you please explain in detail how to reach it or upload a gif?
Thanks!

#10

Hi There,

Sorry for the confusion, VC columns does not offer alignment options. Please use this following classes instead.

right-text
center-text
left-text
justify-text

Hope it helps,
Cheers!

#11

I added text-align: center; to the previous class and it works now :slight_smile: Thanks!

#12

Glad to hear that :slight_smile:

#13

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