Archived topic
Align text vertically centered to align with middle of image
8 replies · Started by MMS on April 5, 2023
Hi, I'm trying to vertically align the text 'Climate Pledge Friendly' with the middle of the logo in the product table on the page https://makemesustainable.com/do-dehumidifiers-use-a-lot-of-electricity/ At present, it seems to default to the top. Setting vertical alignment for the grid to center has no effect.
See screenshot https://imgur.com/a/XfUk8Zy
Also. On mobile, the logo seems to be defaulting to the line above despite there seeming more than enough space?
Hi there,
I don't believe using Grid is the best way to set this up.
Have you considered using a button block with SVG icon?
https://docs.generateblocks.com/article/button-overview/
https://docs.generateblocks.com/article/icon-overview/
Hi, I don't believe there is an SVG icon available for this particular image. Is it possible to add an image into a button?
Hi there,
try this:
1. add a Container Block.
1.1 set its Layout -> Display: Flex.
1.2 set the Justify Content and Align Content to Center
2. inside add your image block, set its width and height and set its bottom margin to 0
3. after that add a headline block, again set its bottom margin to 0
Unfortunately, it seems if I do it that way the image container takes up 50% of the space which squashes the text over to the right. Is there a way to set the image container to 25% vs 75% like you can with a grid?
A grid is not required if you are using David's solution.
Looks like you found a workaround of using a linked image instead?
Hi, I've used an image as I can't get the other solution to work, thanks
No problem :)
