Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Vertical center content inside container

  • Hello,

    I have a page containing containers below each other with a background image. Both have content inside. I want to vertically center this content inside the container containing the background image. And also align the arrow down button to the bottom of the container. How can I achieve this? I’ve added a screenshot for reference and a link to this specific page.

  • The structure you are using has 1 too many container, can you make the structure into this?

    - container A
      -- container B
        --- headline 
        --- headline 
        --- headline 
      -- button

    1. select container A, use the flexbox alignment matrix to align the container B to center.

    2. select the button, set z-index to 2.

    3. add a CSS class to the button, eg. stick-to-bottom
    Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

    4. add this CSS, note the 30px is the half of the icon width.

    a.gb-button.stick-to-bottom {
        position: absolute;
        bottom: 50px;
        left: calc(50% - 30px);
    }

    Let me know if this helps!

  • Perfect! Thank you, it worked. However, it seems like the content is still pushed down a bit. I’m not sure what is causing this. Could you please take a look?

  • Hi there,

    You can set the top margin of the container to something like -500px to push it up.

  • Okay, but isn’t there another way to vertically center this container without it being pushed down? There must be some element or something that is causing it not to center vertically. Because the container settings are correct now for this.

  • However, it seems like the content is still pushed down a bit. I’m not sure what is causing this.

    It’s not. It’s right in the middle. It’s visually pushed down as the container is 100vh in height, but the site header pushed the container down, so you can not see the full height of the container, and because of this, the inner container looks like positioned in the lower part of the container.

    I removed the header, and you can see the full container:
    https://app.screencast.com/vgsGFp6vpfK9w

    So the best option is to calculate a proper height for the container, which is 100vh minus the header height. Which means change the min-height of the container from 100vh to calc(100vh - 101px).

  • Thank you for the detailed explanation. I understand now. Should I add the min-height: calc(100vh - 101px); as custom CSS, or is it possible to add this to the container in the GB editor?

  • You can directly add this into the min-height field.

  • Perfect! Thank you. I have an additional question. On mobile, when you click the arrow down to go to the section below, it looks like the content isn’t vertically centered, but on desktop, it does. Is this normal?

  • Mobile header is taller than the desktop header, you need to change themin-heightfor mobile to calc(100% - 122px)

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.