Vertically Centering Blocks of Two Columns

Site URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you

I saw this effect recently on a website (https://www.violahillstudio.com/) where the contents of two columns are vertically centered without using spacers. I've tried inspecting the code of the website and can't figure out how to achieve the same effect on a client's website. 

URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you

Password: emilie

What I'm trying to do is in the index where the image block and text block appear beside each other, I would like to vertically center align the contents rather than have them align to the top of the index and have this effect maintain down to a screen size of 640px, after which the blocks stack on top of each other. I would ideally like to achieve this without the use of spacer blocks. 

I've attached an image that might help to explain this better.

Any guidance would be greatly appreciated!

Add to Home > Design > Custom CSS

/* center text */
@media screen and (min-width:768px) {
div#page-5f384afee734c879bca3d892 .span-12>.row:nth-child(2) {
    display: flex;
    align-items: center;
}
}

You're a legend! This worked perfectly!

Dear @tuanphan,

I have the exact same issue, except my classes are all different and I need to do the same effect for 23 pages of staff members.
I would like the staff biography (the longer text) to be vertically centered next to the image.

Since I want to do this to many pages I gave the biography a class name by using this html code:

<div class=staffbio><h4>
Lajos became part of 
  ...
  ...
  expression.</h4></div>

Website: https://wisteria-panda-z2eg.squarespace.com/staff/wienkamp
pw: rotorrotor

How should I adjust you css in order to get the desired effect? 

All the best!

Gregor

22 hours ago, Tonmeister said:

Dear @tuanphan,

I have the exact same issue, except my classes are all different and I need to do the same effect for 23 pages of staff members.
I would like the staff biography (the longer text) to be vertically centered next to the image.

Since I want to do this to many pages I gave the biography a class name by using this html code:

<div class=staffbio><h4>
Lajos became part of 
  ...
  ...
  expression.</h4></div>

Website: https://wisteria-panda-z2eg.squarespace.com/staff/wienkamp
pw: rotorrotor

How should I adjust you css in order to get the desired effect? 

All the best!

Gregor

Hi. I see you solved?

@tuanphan No, I just used a spacer. But this gives me uneven results depending on display.

I just removed the spacer, can you give it a go?

Thank You 🙏

2 minutes ago, Tonmeister said:

@tuanphan No, I just used a spacer. But this gives me uneven results depending on display.

I just removed the spacer, can you give it a go?

Thank You 🙏

Add to Home > Design > Custom CSS

/* Staff - Wienkamp page */
@media screen and (min-width:768px) {
div#block-b1204f7dea47721483c4>.row:nth-child(2) {
    display: flex;
    align-items: center;
}
}

Thank You, that works!!

@tuanphan Hi I am looking to do the same on here:

https://tarantula-dachshund-y6ky.squarespace.com/ 

On 1/7/2021 at 5:43 AM, NivS said:

@tuanphan Hi I am looking to do the same on here:

https://tarantula-dachshund-y6ky.squarespace.com/ 

password: steph

Add to Design > Custom CSS

/* We help you feel good */
@media screen and (min-width:768px) {
div#page-5fdd756a91828d0f5d309bf2>.row {
    display: flex;
    align-items: center;
}
}

@tuanphan thank you so much! 

@tuanphan Hiya 🙂 I'm looking to do the same. Trying to get the text to fall vertically centred to the image without using spacer blocks.

https://maroon-dodecahedron-4cnt.squarespace.com/
Password: R0byn11*

On 1/10/2021 at 6:09 PM, RobynHunt said:

@tuanphan Hiya 🙂 I'm looking to do the same. Trying to get the text to fall vertically centred to the image without using spacer blocks.

 

https://maroon-dodecahedron-4cnt.squarespace.com/
Password: R0byn11*

I don't see this section. Can you check url again?

Hi @tuanphan 

Sorry about that! The url is https://maroon-dodecahedron-4cnt.squarespace.com/home

On 1/18/2021 at 5:23 PM, RobynHunt said:

Hi @tuanphan 

Sorry about that! The url is https://maroon-dodecahedron-4cnt.squarespace.com/home

Add this CSS

/* work with me - websites */
@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1582528870926_16860+.row {
    display: flex;
    align-items: center;
}
}

Fabulous, thank you! @tuanphan

@tuanphan I've been trying to use the logic from the codes above to do this on a site I'm working on, but cannot figure it out. Thanks in advance!

https://accordion-amphibian-3jtt.squarespace.com

Password: ss21

On 4/24/2021 at 4:14 AM, Squid said:

@tuanphan I've been trying to use the logic from the codes above to do this on a site I'm working on, but cannot figure it out. Thanks in advance!

https://accordion-amphibian-3jtt.squarespace.com

Password: ss21

Add to Design > Custom CSS

/* align text image */
@media screen and (min-width:768px) {
/* innovative */
div#page-section-60832dc6bcb1090708e9c3d8>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* teamwork */
div#page-section-60832dabbcb1090708e9c0cb>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* we are solutions */
div#page-section-60832d878a8cae2d026ad750>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
}

Thank @tuanphan, this helps clarify to logic.

@tuanphan I'm trying to do this as well. Tried the codes above, replacing with my section/row IDs, and I couldn't get it to work.

Page link here - https://privnote.com/jnR5Ezi5#tUQkwicig

Thanks for your help 🙏

*edit - to clarify it's in the "What You'll Get..." section w the black background. I want to vertically center the text and images in both those rows

11 hours ago, markmark1 said:

@tuanphan I'm trying to do this as well. Tried the codes above, replacing with my section/row IDs, and I couldn't get it to work.

Page link here - https://privnote.com/jnR5Ezi5#tUQkwicig

Thanks for your help 🙏

 

*edit - to clarify it's in the "What You'll Get..." section w the black background. I want to vertically center the text and images in both those rows

Can you check site url?

@tuanphan

Thanks for all of your great answers and help you provide for people like me!

Would there be any downside to adding CSS that vertically centers all objects (pics, text, buttons, etc) in a row? How would this be done?

Why doesn't squarespace give us the ability to do this from a design setting?

On 6/30/2021 at 6:07 AM, chadwritesallnight said:

@tuanphan

Thanks for all of your great answers and help you provide for people like me!

Would there be any downside to adding CSS that vertically centers all objects (pics, text, buttons, etc) in a row? How would this be done?

Why doesn't squarespace give us the ability to do this from a design setting?

Can you share link to page where you have problem?

On 7/2/2021 at 3:15 AM, tuanphan said:

Can you share link to page where you have problem?

@tuanphan

Is there a way to do this for all sections across a website?

On 6/29/2021 at 7:07 PM, chadwritesallnight said:

@tuanphan

Thanks for all of your great answers and help you provide for people like me!

Would there be any downside to adding CSS that vertically centers all objects (pics, text, buttons, etc) in a row? How would this be done?

Why doesn't squarespace give us the ability to do this from a design setting?

@chadwritesallnight Did you ever get an answer to your question? I'm wondering the same thing... thanks!