Vertical-align property not working in CSS Styling

[Former Member]

Hi,

I am trying to make a responsive web design, so everything is in a grid layout. I have some text boxes where I want the text to be vertically centered. I have tried using the vertical-align property in CSS, but it doesn't work in Design Studio. Please find the screenshot attached.

Could anyone tell me if there is another way to vertically align text in Design Studio?

Best,

Sakshi

[Former Member]

Hi Sakshi,

This seems an old post however noticed that you have not marked as "Answered"

The below script in CSS seems to work perfectly fine for me

	display: flex;
	justify-content: center;
	flex-direction: column;
	height: auto;

Below are some additional links explaining this in detail. Hope this helps

https://css-tricks.com/centering-css-complete-guide/

Centering in the Unknown | CSS-Tricks

I have posted this answer for also

Regards,

Premdas

[TammyPowlas]

Have you seen/tried the options listed in this thread?

[Former Member]

Well, whenever the height or the width is made absolute, (as it is done in several responses in that post), the vertical align works. But, if you want the grid layout to re-size on its own, you cannot make things absolute. Thus, none of the approaches work for a responsive design.

[TammyPowlas]

Have you tried Jeroen's suggestions listed here:

[Former Member]

Well, there are two or perhaps more ways in which a responsive design can be made. One is how Jeroen's showed by using the media property in CSS and using definitive values for each output device. Another way is through the grid layout, although restrictive, you don't have to specific numbers in CSS files there.

I'm going by the second option. So, though the blog has some really nice ideas, they don't work for me.