Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to vertically align text center


winabean7

Question

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? 😭

Screen Shot 2020-09-01 at 3.56.55 PM.png

Screen Shot 2020-09-01 at 3.57.38 PM.png

Link to comment

23 answers to this question

Recommended Posts

  • 0
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?

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

image.thumb.png.20652aebc7489eb500834a5a458fad4b.png

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

image.thumb.png.90f832f5d74c3a0ede2e165cfe619c1b.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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:

image.png.88529da1ff752b4bca53fc6d4623f6d4.png

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 :)

 

Link to comment
  • 0
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:

image.png.88529da1ff752b4bca53fc6d4623f6d4.png

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

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 🙂

Edited by Mevn
Link to comment
  • 0
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?

image.thumb.png.d92db8774c542506a038a0814243d886.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Capture d’écran 2021-05-09 à 19.02.06.png

Link to comment
  • 0
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

Capture d’écran 2021-05-09 à 19.02.06.png

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

image.thumb.png.d2d205b8c796a26e7c9c32423fc67597.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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 

 

Capture d’écran 2021-05-12 à 09.47.52.png

Capture d’écran 2021-05-12 à 09.46.09.png

Link to comment
  • 0
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 

 

Capture d’écran 2021-05-12 à 09.47.52.png

Capture d’écran 2021-05-12 à 09.46.09.png

You mean

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

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.. 

Link to comment
  • 0
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?

accesspasssword.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...