Text not aligning middle vertically

[brilliantlights]

I have this issue of the section titles and how the lines fit at both side with the title at the middle.

See the first image which is from the site i am working on.
The second is the one i manage to put up in webflow which i don’t think its perfect

—image on main website

-----on webflow

I used columns to try to fit it but then it looks not too perfect as the main image and when i take it to mobile it looks just skewed.

Please can you help me to figure the best way to do it?

Thanks

[brilliantlights]

This is the new preview: https://preview.webflow.com/preview/koad?preview=de430d5f144f3c4a4692cdfc1d6c20fc

[brilliantlights]

@samliew Thanks for splitting it up

Please any update?

[sabanna (Anna)]

Hello, @brilliantlights

For make the object vertically centered give it position: absolute, aligning top: 50% + transform X axis: -50% (move 50% up).

So, in your case:

• get rid of margins on the lines and paddings on service div
• make columns, which contains lines, height equal heading line height (look in font settings)
• use settings above for centering lines
• keep columns height same as heading FONT LINE HEIGHT on all devices

Regards,
Anna

[brilliantlights]

I hope i can catch up. I’ll work on it and get back to you. Thanks

[cyberdave (Dave S.)]

Hi @brilliantlights, check out how to have perfect center alignment using Flexbox: Visual CSS flexbox builder | Webflow

I hope this helps!

[brilliantlights]

Thanks @cyberdave that worked but still the title between the lines is still not yet perfectly centered.

see it https://preview.webflow.com/preview/koad?preview=de430d5f144f3c4a4692cdfc1d6c20fc

And when i resize my browsers one of the title breaks into two but it does not reflect on any of the mobile versions in designer. How do i make this title responsive?

This is the pic that describes what i see

please can you help me figure out what i’m missing?

[cyberdave (Dave S.)]

Hi @brilliantlights, take a look at my video, I hope this helps:

- YouTube

[brilliantlights]

Thank you Boss. I’ll get back to you asap

[brilliantlights]

Hi cyberdave, I’ve followed the steps meticulously but i’m still having issues.

First the space is still not yet even i mean the one’s i denoted with a and b. I don’t know if it is my sight but the title doesnt yet look centered.

Another thing is when i resize the browser window the title “My Work” breaks into two lines.

public link: https://preview.webflow.com/preview/koad?preview=de430d5f144f3c4a4692cdfc1d6c20fc

Please i need your help

[cyberdave (Dave S.)]

Hi @brilliantlights, thanks for getting back to me. I took a look, and on the ABOUT text, there is 15px letter spacing, so there is an extra 15px trailing the last letter. To compensate, try changing the character spacing to 10px and change the left padding in this case on the service heading to have 10px left padding.

When I changed that, it seems to be aligning correctly, and also corrects the issue with the My Work wrapping:

I hope this helps! Let me know and I am happy to look further.