# Dynamic centered text button can only be dragged on the left half

**URL:** <https://phaser.discourse.group/t/dynamic-centered-text-button-can-only-be-dragged-on-the-left-half/2291>\
**Category:** Phaser 3\
**Created:** [April 29, 2019, 6:52am UTC](https://phaser.discourse.group/t/dynamic-centered-text-button-can-only-be-dragged-on-the-left-half/2291 "2019-04-29T06:52:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrKlein](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mrKlein](https://phaser.discourse.group/u/mrKlein)\
**Post date:** [April 29, 2019, 6:52am UTC](https://phaser.discourse.group/t/dynamic-centered-text-button-can-only-be-dragged-on-the-left-half/2291/1 "2019-04-29T06:52:03Z")

</div>

Hi,

I am starting my first little game with Phaser and it’s not going entirely smooth :D. I need to display a button with a word (dynamic text and size), center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible.

These three problems took most of my time.

- Center the text in a button ( which is a graphic )
- Putting these in a container and centering the container.
- Dragging the container.

I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn’t so simple, it didn’t work or I did not understand it enough. So I manually calculated those now.

I was hoping someone could explain why the those attempts didn’t work.

But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong.

I made a fiddle with all my attempts. I commented the failed attempts.

[https://jsfiddle.net/mrklein/5verkbfg/52/](https://jsfiddle.net/mrklein/5verkbfg/52/)

I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this.

kind regards.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 29, 2019, 7:08am UTC](https://phaser.discourse.group/t/dynamic-centered-text-button-can-only-be-dragged-on-the-left-half/2291/2 "2019-04-29T07:08:08Z")

</div>

Hello @mrKlein, I’m not sure if [this](https://jsfiddle.net/hcakar/xpgz48d6/13/) is solution for you but just give it a try 😉

---

<div class="post-metadata">

**Author:** ![mrKlein](https://avatars.discourse-cdn.com/v4/letter/m/76d3ee/32.png) [@mrKlein](https://phaser.discourse.group/u/mrKlein)\
**Post date:** [May 3, 2019, 2:10pm UTC](https://phaser.discourse.group/t/dynamic-centered-text-button-can-only-be-dragged-on-the-left-half/2291/3 "2019-05-03T14:10:02Z")

</div>

Thanks! Nice solution,  
I didn’t know about the generateTexture method, still learning