Vertical centring of text in a...

User 2929204 Photo


Registered User
69 posts

Hi there,

I have a container with 4 columns each one with a paragraph box. See image 1...

What I'm after is that when I increase the screen size, for the text to be vertically centred within their containers. In the smallest width size, I have one container that is 2 lines and the the other 3 are all only 1 line... but they are VERTICAL TOP aligned. As I increase the screen width, all the items occupy one line but they are still VERTICAL TOP aligned (I have the container a fixed height).

I've looked at previous posts which say that the container should be FLEX (which I have) but I can't see anything else that could make the text centred. The ALIGN option for the ITEMS moves all the text up and everything is still VERTICAL TOP aligned. see image 2...

I was hoping for something as simple as a VERTICAL ALIGN menu somewhere, but unfortunately, can't see anything like that.

Thanks, Maz

Attachments:
User 2699991 Photo


Registered User
3,750 posts
Online Now

Maz wrote:
Hi there,

I have a container with 4 columns each one with a paragraph box. See image 1...

What I'm after is that when I increase the screen size, for the text to be vertically centred within their containers. In the smallest width size, I have one container that is 2 lines and the the other 3 are all only 1 line... but they are VERTICAL TOP aligned. As I increase the screen width, all the items occupy one line but they are still VERTICAL TOP aligned (I have the container a fixed height).

I've looked at previous posts which say that the container should be FLEX (which I have) but I can't see anything else that could make the text centred. The ALIGN option for the ITEMS moves all the text up and everything is still VERTICAL TOP aligned. see image 2...

I was hoping for something as simple as a VERTICAL ALIGN menu somewhere, but unfortunately, can't see anything like that.

Thanks, Maz



Have you tried setting the left & right margins to Auto Auto

or
If the margins are set to Auto Auto already then set them to 0 PX

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2929204 Photo


Registered User
69 posts

They were set to 0 PX so I changed the left/right margins for paragraph container to AUTO which didn't do the trick and I also changed l/r margins for the container housing the 4 paragraph containers and that didn't work either.

Maz
User 379556 Photo


Registered User
1,248 posts

In a Flex container, to align an item such as a paragraph within it at the centre vertically one uses the following Flex property on the container: Align > Items > Center.

Frank
User 122279 Photo


Senior Advisor
13,771 posts
Online Now

Hi again Maz,
Here's another wee file for you.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2929204 Photo


Registered User
69 posts

I've checked my settings and everything that can be centred is centred. I can see how to horizontally align centre but as far as I can see, there's nothing to make it vertically aligned centre.

I've uploaded my project to here
(https://drive.google.com/file/d/1IFDMVE … sp=sharing)

My issue relates to the index page. I have a sticky menu at the top and another sticky menu with the dark green background.

What i'm trying to do is to have the main sticky menu at the top to have the items vertically aligned to the bottom and the other sticky menu to have the items vertically aligned to the centre.

Thanks, Maz
User 379556 Photo


Registered User
1,248 posts

Maz wrote:
as far as I can see, there's nothing to make it vertically aligned centre.

My post above shows what to use for vertical (not horizontal) alignment.

Frank
User 2929204 Photo


Registered User
69 posts

Hi Frank,

I understand that. What I've just checked was whether the fixed height I had for the container was affecting it in some way. I changed it to 200 to see, and yes, the paragraph containers are vertically centred. But what I'm after is for the items within the paragraph containers to be vertically centred and not the paragraph containers themselves.

Maybe I'm missing the point of what you mentioned previously, I don't know.

I've attached an image and as you can see, the item containers are centred but not the contents.

Attachments:
User 122279 Photo


Senior Advisor
13,771 posts
Online Now

When asking for help with an SD project please post the actual .rsd file, not the exported files. It takes much longer to search for classes in the HTML file and compare them to the ones in the CSS files than it would do if we could just open the SD project and spot things at a glance. If you don't want to share your project file with the world, you have my email address.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
13,771 posts
Online Now

You posted that reply to Frank while I was typing...
Play with the top and bottom padding/margin of the text, or of the containers.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.