Home>Support>vertically centre a text widget

vertically centre a text widget

By See You, 10 years ago. Last reply by shahone, 8 years ago.

I have installed the Vantage theme, and the Page Builder.
I use rows with 2 columns. On the right column I use an Image (PB) widget. On the legt column I use a text widget. The picture widget is bigger than the text widget. Is there a way to vertically centre the text widget to the picture?
This is my homepage: http://www.easymount.at/Wordpress/montageanleitung/
Thanks for your help
Br Christian

URL: http://www.easymount.at/Wordpress/montageanleitung/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 26 days ago Greg Priday
    Hi, I Work Here

    Hi See You

    Unfortunately vertically aligning using CSS is notoriously difficult. It’s something I’d like to implement in Page Builder, but haven’t been able to find a good solution.

    At the moment the only solution would be to use custom CSS to add a top margin to cells. You’d need to find the cell ID for each cell and then add a top margin. I can point you in the right direction for this, but you’ll need to be familiar with CSS and HTML to actually implement it.

    You’ll need to familiarize yourself with the Chrome inspector tool and the Custom CSS editor – https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    Then you’ll need to find the cell IDs of the text cells and add top margins. Something like this.

    #panel-103-2-0-0 {
   margin-top: 80px;
}

    To make this all responsive, you’ll also need to add media queries to get rid of the top margin on mobile devices.

    Sorry there isn’t an easier solution.

  2. 9 years, 5 months ago Will Webb

    Hello Greg,

    I don’t suppose you have found a solution to this yet? I am still using the css work around for time being and using media queries to eliminate as you stated.

  3. 8 years, 7 months ago shahone

    Hi,
    is there any new solution regarding vertical alignment or vertical centering of text / image in a page-builder row?

    If not, can percentages be used, in CSS as follows, for vertical centering instead of padding in pixles?

    #parentdiv {
    /* … */
    }
    /* text / image to be vertically centered */
    #childdiv {
    position: relative;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    }

    Thanks in advance!

    Hamza

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More