Align content vertically in a rectangle (start, center, end)

Tips & Tricks
1

If you want to center text vertically in a fixed height box you can use this class:

For center:

.alignFlexCenter {
	display: flex !important;
	align-items: center;
}

For completion's sake, here are the other variants.

For top:

.alignFlexStart {
	display: flex !important;
	align-items: flex-start;
}

For Bottom:

.alignFlexEnd {
	display: flex !important;
	align-items: flex-end;
}

This uses flexbox, one can also use grid or a table display setting with slightly other benefits.

Version with a preview in Hype

For center:

.alignFlexCenter, .alignFlexCenter innerhtmldiv {
	display: flex !important;
	align-items: center;
}

For completion's sake, here are the other variants.

For top:

.alignFlexStart, .alignFlexStart innerhtmldiv {
	display: flex !important;
	align-items: flex-start;
}

For Bottom:

.alignFlexEnd, .alignFlexEnd innerhtmldiv {
	display: flex !important;
	align-items: flex-end;
}

Example:
alignFlex.hype.zip (76,0 KB)

7 Likes
2

I am trying to build a textbox for citations: The text should build up from bottom to top, but with a variable textbox size that adapts to the text. However, the textbox keeps moving – even if I place it in a group and anchor the group to a fixed Y-value via script.

3

Could you provide an example file?

4

Sure, gladly! The textbox should align with the baseline at the bottom, and the text should then build up line by line from bottom to top. This is a version without scripting, as none of that worked.
alignBottom.hype.zip (15.3 KB)

1 Like
5
3 Likes
6

You really put in a lot of effort, Max!! :grinning: Thank you so much for that. It works wonderfully and helps me a lot!!

2 Likes