# How to align text to vertical Center when the button Height is set to fill container

**URL:** https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060
**Category:** Questions about Thunkable X
**Created:** [January 26, 2021, 7:26am UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060 "2021-01-26T07:26:16Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![9itech.onlinexbw](https://avatars.discourse-cdn.com/v4/letter/9/f4b2a3/32.png) [@9itech.onlinexbw](https://community.thunkable.com/u/9itech.onlinexbw)
#### Post date: [January 26, 2021, 7:26am UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/1 "2021-01-26T07:26:16Z")

</div>

I have created a simple button with Height set to Fill Container and the text on button shifts to top . how to place the text at the center of the button

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [January 26, 2021, 9:22am UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/2 "2021-01-26T09:22:17Z")

</div>

are you using drag and drop ui or old ui

---

<div class="post-metadata">

### Author: ![9itech.onlinexbw](https://avatars.discourse-cdn.com/v4/letter/9/f4b2a3/32.png) [@9itech.onlinexbw](https://community.thunkable.com/u/9itech.onlinexbw)
#### Post date: [January 26, 2021, 2:47pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/3 "2021-01-26T14:47:16Z")

</div>

old ui

---

<div class="post-metadata">

### Author: ![overshield](https://avatars.discourse-cdn.com/v4/letter/o/e19b73/32.png) [@overshield](https://community.thunkable.com/u/overshield)
#### Post date: [October 12, 2021, 4:54pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/4 "2021-10-12T16:54:45Z")

</div>

Did this ever get figured out?

Edit: Looks like it automatically centers it on the Thunkable live editor. I’m betting it does in the live app as well but I haven’t checked yet.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [October 12, 2021, 5:09pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/5 "2021-10-12T17:09:21Z")

</div>

> [@overshield](#):
>
> Did this ever get figured out?

Was it ever a problem?  
Have you tested it in the Thunkable Live App?

---

<div class="post-metadata">

### Author: ![overshield](https://avatars.discourse-cdn.com/v4/letter/o/e19b73/32.png) [@overshield](https://community.thunkable.com/u/overshield)
#### Post date: [October 12, 2021, 5:10pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/6 "2021-10-12T17:10:07Z")

</div>

When viewing it on the computer screen it’s not centered

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [October 12, 2021, 5:11pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/7 "2021-10-12T17:11:17Z")

</div>

Really?  
What do you call this?

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/5/e5dfd029efc9b0428545973410d0c11225a08823.png)

---

<div class="post-metadata">

### Author: ![overshield](https://avatars.discourse-cdn.com/v4/letter/o/e19b73/32.png) [@overshield](https://community.thunkable.com/u/overshield)
#### Post date: [October 13, 2021, 5:44pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/8 "2021-10-13T17:44:27Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/5/450c00c596fd37053cd2a70090749f909b9a31f8.png)  
What do you call this?

Not sure why you had to say it the way you did, but I’ll oblige, I would call yours a bad attempt to reproduce the problem I am having

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [October 13, 2021, 6:57pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/9 "2021-10-13T18:57:23Z")

</div>

😊 😊  
The design screen does not show the actual text position but the `Web Test` or `Live App` will do.

---

<div class="post-metadata">

### Author: ![ronnie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ronnie/32/121539_2.png) [@ronnie](https://community.thunkable.com/u/ronnie)
#### Post date: [June 19, 2022, 6:32pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/10 "2022-06-19T18:32:16Z")

</div>

I know this is an old thread, but I am now having issues with buttons. Before I would just set the height and width of the button to `fit contents` and it worked well. However, this is now a pretty big issue that I can’t seem to overcome. No matter what I try, my button text is glued to the top and I have not found any way to get it to move to the center of the button: padding doesn’t work, margins do not work, nor does setting the max height of the button to try forcing a pseudo centered text on the button. A workaround that does work is labels, but the label is not a good option because only the text is active to the Click action. And, no, this isn’t just in the Thunkable Live app. It is replicated in both the TL app and live in TestFlight:

Thunkable Live app:

 ![IMG_5275.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/2/428afcba8bbe4273704ae61c1a91bdf3a38782f0.jpeg)

TestFlight app:

 ![IMG_5276.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/6/16881ae56cc9d727dc2cffd6747d4822af1eccdd.jpeg)

This makes my buttons look like garbage. Any ideas on how to get text to align in the middle of a button?

I am still using the StP interface since DnD still does not work across different device sizes.

---

<div class="post-metadata">

### Author: ![ronnie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ronnie/32/121539_2.png) [@ronnie](https://community.thunkable.com/u/ronnie)
#### Post date: [June 19, 2022, 7:07pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/11 "2022-06-19T19:07:17Z")

</div>

I converted to DnD and, I have to say, I am quite impressed with the progress made. I tested on my Android tablet and it’s playing very nicely with resizing! 😃 However, the buttons are still an issue. Here is a DnD screenshot from the Thunkable Live app:

 ![IMG_5277.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/3/233a2b02dceb7d9b3d1c94362287ee0004ea99e7.jpeg)

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 19, 2022, 9:00pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/12 "2022-06-19T21:00:58Z")

</div>

This has been a problem for a year and a half. Please add a comment to this bug report:

> <https://github.com/thunkable/thunkable-issues/issues/778>
>
> \### Platform
> Thunkable X
> 
> \### Issue/Request Origin
> 
> \### Steps to Reproduce
> …
> Not a deal-breaker but just an annoyance. I'll add a plug for my hope that Thunkable joins the label and button components into a single all-powerful component.
> 
> 1. Add a button to a screen.
> 2. Change the font size from the default to something smaller (e.g. 10) or larger (e.g. 30) -- it doesn't happen with all font sizes, just most of them.
> 3. The button Text is no longer centered vertically within the button (see screenshots).
> 
> \### Project Link
> 
> \### Expected Behavior
> I would expect text to auto-center vertically within the button height.
> 
> \### Actual Behavior
> See above and below.
> \`\`\`
> STACK TRACE AND/OR SCREENSHOTS
> \`\`\`
> !\[Screen Shot 2020-12-16 at 11 07 14 AM\](https://user-images.githubusercontent.com/10355498/102394644-ea13bc80-3f8e-11eb-93b9-6795800be4ae.png)
> !\[Screen Shot 2020-12-16 at 11 07 09 AM\](https://user-images.githubusercontent.com/10355498/102394649-eaac5300-3f8e-11eb-8c05-dfbfe85992e4.png)

Hopefully, the more comments it gets, the more likely it is that Thunkable fixes it.

---

<div class="post-metadata">

### Author: ![ronnie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ronnie/32/121539_2.png) [@ronnie](https://community.thunkable.com/u/ronnie)
#### Post date: [July 25, 2022, 4:06pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/13 "2022-07-25T16:06:02Z")

</div>

I did finally find a way to work around this issue. I created image files for my button text and then cleared the text out of the button. I used a 250px by 100px transparent PNG for the smaller buttons and a 350px by 100px transparent PNG for the wider buttons. It’s doing what I need it to do. For the buttons themselves, I just set them to relative percentages to make them the size on the screen I need them to do since fill contents won’t work if there is no text in the button. I set the images as background images and tell it to contain the background image.

It’s been driving me nuts now that all of the alignment that was working is no longer working, but I feel I can at least publish now and not have my app look unpolished.

---

<div class="post-metadata">

### Author: ![ronnie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ronnie/32/121539_2.png) [@ronnie](https://community.thunkable.com/u/ronnie)
#### Post date: [July 25, 2022, 4:12pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/14 "2022-07-25T16:12:29Z")

</div>

Here is a before screenshot:

 ![71D4E92E-5C25-4582-B474-A57796A6ADA2_1_201_a](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/c/ac2352c228fb3bd042b37dbb9a0c3872c1b9553f.jpeg)

And an after screenshot:

 ![A7C26AF1-B020-4760-90E1-16CDA977FFEC_1_102_o](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/a/ca7213cca36945e414949de78e98b4b0474a893f.jpeg)

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [July 25, 2022, 5:56pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/15 "2022-07-25T17:56:33Z")

</div>

when you replace the buttons with new buttons, do you see the same issue?

I dont have this issue in my most recent apps i dont believe

---

<div class="post-metadata">

### Author: ![ronnie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ronnie/32/121539_2.png) [@ronnie](https://community.thunkable.com/u/ronnie)
#### Post date: [July 25, 2022, 5:58pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/16 "2022-07-25T17:58:36Z")

</div>

> [@jared](#):
>
> when you replace the buttons with new buttons, do you see the same issue?

I don’t know. I haven’t replaced any of my buttons. I can create a copy and try it out. I’m trying to publish today and I have a lot of buttons! Replacing buttons = a lot of blocks to update.

---

<div class="post-metadata">

### Author: ![harri.f](https://avatars.discourse-cdn.com/v4/letter/h/e79b87/32.png) [@harri.f](https://community.thunkable.com/u/harri.f)
#### Post date: [August 26, 2022, 9:22am UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/17 "2022-08-26T09:22:43Z")

</div>

But buttons into a row container and set the buttons heigth to Relative Size 100%.  
Then it should works.

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 1:30pm UTC](https://community.thunkable.com/t/how-to-align-text-to-vertical-center-when-the-button-height-is-set-to-fill-container/1069060/18 "2024-11-08T13:30:31Z")

</div>


