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

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)

6 Likes