How to center text in the middle of an image

[CreatorTim]

Hi, how can I align the text in the "image with text" section so that it’s vertically centered?

I just want the text to be in the middle of the image’s height.

Please provide the code I can add to the custom.css section, only for the sections where I want this applied.

Here’s my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll down a bit, and you’ll see the "image with text" sections.)

Thanks a lot,
Tim

[EstherBui]

Hi CreatorTim 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file component-image-with-text.css and add this code at the end of the file

div#ImageWithText--template--22711083893001__image_with_text_RK8JMc {
   justify-content: center;
}

Best,
Esther

[DaisyVo · Accepted solution]

Hi @CreatorTim 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 769px){
div.image-with-text__content {
    justify-content: center !important;
}
}

Here is the result: 

I hope this helps

 Best,

Daisy

[CreatorTim]

THXXX MAN

[GTLOfficial]

Hello @CreatorTim 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-image-with-text.css
add this code at the end of the file and save.

.image-with-text__content > :first-child:is(.image-with-text__heading), {
margin-top: 55px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks