# Text alignment: one works, the other doesn't

**URL:** <https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688>\
**Category:** Elements\
**Created:** [July 8, 2025, 10:18pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688 "2025-07-08T22:18:53Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 8, 2025, 10:18pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/1 "2025-07-08T22:18:53Z")

</div>

i have created a small table with 2 columns and three rows each. i have created two different examples.

the first table was only created from text components within a grid.

in the second table, the text components are each in a container.

in the second table, the alignment of the text works without any problems.  
but i can’t get the text alignment to work in the first table.

 ![Bildschirmfoto 2025-07-09 um 00.17.39](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/3/5336c3a08aa756f5214df037f881c93b618dd85b.jpeg)

@dan what is the best way to solve this problem? is there a solution without containers, because I don’t need them at this point in the code.

[Link to the project](elementsapp://downloadDocument/ZgGXONqSftAu)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 9, 2025, 5:40am UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/2 "2025-07-09T05:40:00Z")

</div>

Are you referring to the vertical alignment of the text not working?

I looked at the project and was able to get the first table to work by placing the text within a FLEX component, as it has controls that allow you to center both vertically and horizontally, as you have done in the second example with the container.

 ![CleanShot 2025-07-08 at 19.34.30@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/a/0a552b5e746f82cf12d66d498ec22771cd070f8a.png)

NOTE: I also removed the background color you were setting on the text and used the background of the flex for the colors.

The problem is that there is no VERTICAL text alignment, so using a text block on its own will not get you the vertical alignment. From what I can tell, Tailwind does not appear to have vertical alignment for text.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 9, 2025, 7:06am UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/3 "2025-07-09T07:06:54Z")

</div>

@handshaper

that’s what I want. thank you.

can you show me a screenshot of the setup? I guess you put 2 flexboxes in the grid and then split the text elements accordingly, right?

thx and regards

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 9, 2025, 6:55pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/4 "2025-07-09T18:55:48Z")

</div>

No, I put each of the text blocks in a flex and left them all in the existing grid as you had originally laid it out.

Unfortunately, I deleted the project so I can’t send a screenshot.

There are a number of ways this can be accomplished using a flex box. You could use them to create “rows”, or “columns”. I just tried to use what you had and leveraged the Flex to control the layout of the text block.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 10, 2025, 8:55am UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/6 "2025-07-10T08:55:55Z")

</div>

Hey @Pegasus,

Sorry for the delay on this one, somehow missed it… anyway, I added the following Tailwind css classes to the text component:

`h-full flex items-center justify-center`

 ![Screenshot 2025-07-10 at 9.53.41 am](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/e/eefbc5e85dd5c84f1b14542a9636bcf0be9ee867.jpeg)

How’s that?!

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 10, 2025, 9:20am UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/7 "2025-07-10T09:20:03Z")

</div>

> [@dan](#):
>
> How’s that?!

perfect! that is exactly what i need. 🙂  
then I will probably work with Tailwind CSS classes more often in the future

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 10, 2025, 9:43am UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/8 "2025-07-10T09:43:02Z")

</div>

Yeah, it’s pretty cool what you can with classes, and that’s `The Power of Elements!`

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 10, 2025, 6:36pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/9 "2025-07-10T18:36:17Z")

</div>

I thought you wanted the text centered vertically as well. Looking at the image @dan posted, that does not seem to be the case. What am I missing?

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 10, 2025, 6:48pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/10 "2025-07-10T18:48:24Z")

</div>

@handshaper that’s what I thought at first. but the css-code works.

this saves me having to create a container or flex for each text element. they are absolutely superfluous for me at this point in the code

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 10, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/11 "2025-07-10T19:00:27Z")

</div>

@Pegasus

the stretch setting was not helping

I turned off everything, then used the grid controls to centre the items, then applied padding afterwards

or you use margin vertical auto on each individual text and then apply padding

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 10, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/12 "2025-07-10T20:50:25Z")

</div>

@upssjw that was exactly the starting point for my struggle with the text component

that was my starting set-up. with this setting, the text alignment fits, but the height of the background was no longer correct - hence the stretch setting.

i could then adjust the height of the background with a container or flex. but that was too much unnecessary code for me at this point.

the css classes for the text component are the best solution at the moment. it would of course be nice to be able to make the setting directly in the text component … it’s actually a niche problem but annoying if you don’t know how to solve it. ^^

thanks for your time and support 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 10, 2025, 9:13pm UTC](https://forums.realmacsoftware.com/t/text-alignment-one-works-the-other-doesnt/48688/13 "2025-07-10T21:13:14Z")

</div>

Ah ok didn’t know you had a height restriction
