Utility Classes: Aligning Inner Content (Top/Center/Bottom and Left/Center/Right)

1

CleanShot 2025-02-24 at 16.32.32@2x
CleanShot 2025-02-24 at 16.32.32@2x1186×1190 20.8 KB

I implemented a single-class approach where the first word represents the vertical axis and the second word the horizontal axis, following natural language patterns (like "top left" becoming alignTopLeft). Since left alignment is implicit in Western reading patterns, I created simplified vertical-only classes. For example, alignTop is a standalone vertical alignment without the horizontal component, and I introduced alignMiddle as a convenient shorthand for alignCenterCenter.

While we could have used two separate utility classes for horizontal and vertical alignment—potentially reducing CSS code—I chose a single camelCase naming convention for clarity and ease of use. This approach prioritizes readability and maintains a consistent API structure.

<style>

.alignTopLeft, .alignTopLeft innerhtmldiv {
        display: flex !important;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .alignTopCenter, .alignTopCenter innerhtmldiv {
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
    }
    .alignTopRight, .alignTopRight innerhtmldiv {
        display: flex !important;
        align-items: flex-start;
        justify-content: flex-end;
    }
    .alignCenterLeft, .alignCenterLeft innerhtmldiv {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }
    .alignCenterCenter, .alignCenterCenter innerhtmldiv, .alignCenter, .alignCenter innerhtmldiv {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .alignCenterRight, .alignCenterRight innerhtmldiv {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
    .alignBottomLeft, .alignBottomLeft innerhtmldiv {
        display: flex !important;
        align-items: flex-end;
        justify-content: flex-start;
    }
    .alignBottomCenter, .alignBottomCenter innerhtmldiv {
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
    }
    .alignBottomRight, .alignBottomRight innerhtmldiv {
        display: flex !important;
        align-items: flex-end;
        justify-content: flex-end;
    }

</style>

Example File:
alignInnerContentExample.hype.zip (369,3 KB)

3 Likes
2

CleanShot 2025-02-24 at 15.46.51@2x
CleanShot 2025-02-24 at 15.46.51@2x1188×1186 25.9 KB

Here is a version with two classes with people that prefer that approach.

<style>

   .itemsStart, .itemsStart innerhtmldiv {
        display: flex !important;
        align-items: flex-start;
    }
    .itemsCenter, .itemsCenter innerhtmldiv {
        display: flex !important;
        align-items: center;
    }
    .itemsEnd, .itemsEnd innerhtmldiv {
        display: flex !important;
        align-items: flex-end;
    }
    .justifyStart, .justifyStart innerhtmldiv {
        display: flex !important;
        justify-content: flex-start;
    }
    .justifyCenter, .justifyCenter innerhtmldiv {
        display: flex !important;
        justify-content: center;
    }
    .justifyEnd, .justifyEnd innerhtmldiv {
        display: flex !important;
        justify-content: flex-end;
    }	

</style>

Example File:
itemsAndJustifyInnerContent.hype.zip (378,1 KB)

2 Likes