[Resolved] Horizontally center text in column

[Steig]

Hello,

The second section of this website has an image on the right and text on the left. I’m using the simple columns plugin to separate them. I’ve centered text vertically, but would like to do the same horizontally. I can’t figure out how. Can you please help me?

Thanks

[David]

Hi there,

try this CSS – it will only apply to the 3rd section:

#generate-section-3 .lgc-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[Steig]

thank you!

[David]

You’re welcome

[Steig]

Hello,
I’ve decided to flip the text & images because it looks better on the website, but not on mobile! Is it possible to have the image on the left and text on the right for the desk top view and on mobile have the opposite?

[Tom]

That’s a bit harder I think, unfortunately. We can definitely try – can you start by giving that section a custom class? Then you’ll need to give that second column a class as well.

Then do this:

@media (max-width: 768px) {
    .my-custom-class .generate-sections-inside-container {
        display: flex;
    }

    .my-custom-column-class {
        order: -1;
    }
}

[Steig]

I’m having problems with section 9 on the home page using this code. the center image rides high and I’d like all three images to be centered like in section 3 and 7. Can you please take a look? Thanks!

[Tom]

Give this a shot:

#generate-section-9 .inside-grid-column {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: 0;
    height: 100%;
}

[Steig]

It looks better, but the center image still seems to be top justified.

[Tom]

Can you try the updated code?: https://generatepress.com/forums/topic/horizontally-center-text-in-column/#post-1080081

[Steig]

that did it. Thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts