How to vertically align text center

Site URL: http://www.riverlandcollective.com

I have multiple pages with text blocks on one side and an image on another, and I want the blocks to be vertically aligned center. I was able to make it work using "display: flex; align-items: center;" on some pages but not others, and I have no idea why.

Here's an example of a page where it's working (see the first section): https://www.riverlandcollective.com/about

And an example of a page where it's not (see the first section): https://www.riverlandcollective.com/work

What am I doing wrong? 😭

Use this CSS for Work page

div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}

Hey @tuanphan, thank you so much for your help! I've seen you a lot in these forums when I was looking for a solution, you're a hero. Really appreciate all that you do 🙂

On 9/2/2020 at 11:43 AM, tuanphan said:

Use this CSS for Work page

div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}

 

This works fine on desktop, but on mobile devices the image (or movie in my case) disapears. Any ideas?

On 12/4/2020 at 9:32 PM, Uggel said:

This works fine on desktop, but on mobile devices the image (or movie in my case) disapears. Any ideas?

Can you share page url? We can check easier

https://www.getvibes.se/

The block "It’s such a good vibration" a bit down. The youtube video doesn't show when I try to center the text.

22 hours ago, Uggel said:

https://www.getvibes.se/

The block "It’s such a good vibration" a bit down. The youtube video doesn't show when I try to center the text.

I see video here. Did you solve?

I see footer doesn't look good on tablet. Do you want to fix this?

Hi! Sorry for the late reply, yes I solved the video thing. About the tablet footer, absolutely! Do you have a solution?

On 2/10/2021 at 3:54 PM, Uggel said:

Hi! Sorry for the late reply, yes I solved the video thing. About the tablet footer, absolutely! Do you have a solution?

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f758e421ea34d1aeb060268>.row>.col {
    width: 100%;
}
div#page-section-5f758e421ea34d1aeb060268>.row>.span-1 {
    display: none;
}
div#block-yui_3_17_2_1_1606223524464_6673 {
    display: none;
}
div#block-a54b0002edc5dd4a938a p {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
}

This will move links to new row & make footer navigations horizontal align

Thanks! Works perfect.

Hi, I'm having a similar issue (I'm unable to vertically align text tot he center). I'd like the text on the right to be vertically cantered to the image on the left:

https://cuboid-endive-achr.squarespace.com/

I tried copying the code snippet above, but I'm not sure if I've got the correct div ID for the CSS.

Any advice gratefully received!

Thanks :)

On 3/9/2021 at 5:48 PM, ThamesCanoe said:

Hi, I'm having a similar issue (I'm unable to vertically align text tot he center). I'd like the text on the right to be vertically cantered to the image on the left:

https://cuboid-endive-achr.squarespace.com/

I tried copying the code snippet above, but I'm not sure if I've got the correct div ID for the CSS.

Any advice gratefully received!

Thanks :)

 

Hi. Your layout. This is not possible. If you still need help, can you duplicate the site & add me as a contributor on the duplicated site? I will try testing some code.

Salut ! 

J'essaye d'utiliser le même code pour centrer le texte sur ma page d'accueil mais il ne s'adapte pas.

Je voudrais centrer verticalement le texte pour "livraison gratuite sur nantes" et en dessous de l'autre section avec du texte.

URL du site : https://ww.arabicafes.com

mot de passe: arabicafestest

Merci pour ton aide 🙂

On 5/6/2021 at 4:31 AM, Mevn said:

Salut ! 

J'essaye d'utiliser le même code pour centrer le texte sur ma page d'accueil mais il ne s'adapte pas.

Je voudrais centrer verticalement le texte pour "livraison gratuite sur nantes" et en dessous de l'autre section avec du texte.

URL du site : https://ww.arabicafes.com

mot de passe: arabicafestest

Merci pour ton aide 🙂

L'URL n'existe pas. Pouvez-vous vérifier à nouveau?

Sorry, the URL is this: https://arabicafes.com/  with the password: arabicafestest

Thank's 

On 5/8/2021 at 4:10 PM, Mevn said:

Sorry, the URL is this: https://arabicafes.com/  with the password: arabicafestest

Thank's 

 

livraison gratuite sur nantes

I don't see. Can you take a screenshot?

I'm talking about the top and bottom section of the screen shot here. 

"livraison gratuite sur nantes" and "Valoriser le travail des producteurs  Soutenir les micro-torréfacteurs  Partager les plus beaux cafés"

Thank's

On 5/10/2021 at 12:06 AM, Mevn said:

I'm talking about the top and bottom section of the screen shot here. 

"livraison gratuite sur nantes" and "Valoriser le travail des producteurs  Soutenir les micro-torréfacteurs  Partager les plus beaux cafés"

Thank's

Actually, I think they are fine. Did you solve the problem?

Actually, I am a bit of a perfectionist. There is just a little shift, I find the text is not exactly centered in the section.

URL : www.arabicafes.com password: arabicafestest

An other question, i have a problem with the different size on screen. Particularly with big size.

Like you can see on the uploaded image, there are a difference between the 2 images.

The image on the left it's on my normal screen (mac computer) and the disposition that i want, and the second image it's on big screen of my brother computer.

I see just above on your screenshot of my website that the layout has also changed..

Can you help me to fixe this problem? 🙏

Thank you 

On 5/12/2021 at 2:55 PM, Mevn said:

URL : www.arabicafes.com password: arabicafestest

An other question, i have a problem with the different size on screen. Particularly with big size.

Like you can see on the uploaded image, there are a difference between the 2 images.

The image on the left it's on my normal screen (mac computer) and the disposition that i want, and the second image it's on big screen of my brother computer.

I see just above on your screenshot of my website that the layout has also changed..

Can you help me to fixe this problem? 🙏

Thank you 

 

You mean

• Fix text overlap image
• Increase 3 text with (under image)
• Center vertical text/image on right box

Is this right?

Yes exactly.
And I would also like the main menu to be on one line and not on 2 lines, as can be seen in the second image. I didn't find how to do that.. 

I am having the same issue: when I vertically center the text in a section, my images disappear on mobile
https://www.get-equip.ca/

On 10/7/2021 at 7:41 AM, HEYTK said:

I am having the same issue: when I vertically center the text in a section, my images disappear on mobile
https://www.get-equip.ca/

Hi,

What is password?

On 9/2/2020 at 4:43 AM, tuanphan said:

Use this CSS for Work page

div#page-section-5f4d83e0a82f1a123a9bebe2>.row {
    display: flex;
    align-items: center;
}

 

Hey @tuanphan!

So this code works perfectly just for one line of the section, but can it work on all lines? 

I'm trying to imitate a table without coding one here.. 

https://fairwaystoleadership.squarespace.com/league-table