How to center text in the middle of an image

Solved

How to center text in the middle of an image

CreatorTim
Explorer
408 1 55

 

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

 

CreatorTim_0-1737153208768.png

 

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

 

Accepted Solution (1)

DaisyVo
Shopify Partner
3434 393 475

This is an 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: image.png

 

I hope this helps

 

 Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

EstherBui
Excursionist
275 39 41

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

DaisyVo
Shopify Partner
3434 393 475

This is an 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: image.png

 

I hope this helps

 

 Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
CreatorTim
Explorer
408 1 55

THXXX MAN

GTLOfficial
Shopify Partner
769 160 169

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

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh