# Centering text within a container and stretching + cropping at the same time

**URL:** <https://phaser.discourse.group/t/centering-text-within-a-container-and-stretching-cropping-at-the-same-time/5013>\
**Category:** Phaser 3\
**Created:** [January 27, 2020, 2:40pm UTC](https://phaser.discourse.group/t/centering-text-within-a-container-and-stretching-cropping-at-the-same-time/5013 "2020-01-27T14:40:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Saturday](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@Saturday](https://phaser.discourse.group/u/Saturday)\
**Post date:** [January 27, 2020, 2:40pm UTC](https://phaser.discourse.group/t/centering-text-within-a-container-and-stretching-cropping-at-the-same-time/5013/1 "2020-01-27T14:40:53Z")

</div>

I’m trying to make a menu button with this image: ![panel_wood](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/cefb027213d91b18cd33908157653c8eba2ea050.png)

Here’s what I did:

```
this.scene.load.image("panel", "panel_wood.png");
    this.scene.add.container(200, 200, [
        this.scene.add.image(0, 0, "panel").setCrop(0, 0, 6, 64), // Left edge piece
        this.scene.add.image(0, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(52, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(104, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(104, 0, "panel").setCrop(58, 0, 64, 64), // Right edge piece
        this.scene.add.text(0, 0, "Hello", { fontSize: "24px", fill: "#fff" }).setOrigin(0.5)
    ]);

```

A) How can I get the text to horizontally center within the container?

B) Is there a better way to create the button? Cropping the same image multiple times seems inefficient.

I tried something like this:

```
this.scene.add.container(200, 200, [
        this.scene.add.image(0, 10, "panel").setCrop(0, 0, 6, 64), // Left edge piece
        this.scene.add.image(6, 20, "panel").setCrop(6, 0, 52, 64).setDisplaySize(104, 64), // Center piece
        this.scene.add.image(52, 30, "panel").setCrop(58, 0, 64, 64), // Right edge piece
        this.scene.add.text(0, 0, "Hello", { fontSize: "24px", fill: "#fff" }).setOrigin(0.5)
    ]);

```

But it seems the setDisplaySize or displayWidth also scales the cropping, which makes it impossible to make dynamic.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 27, 2020, 9:40pm UTC](https://phaser.discourse.group/t/centering-text-within-a-container-and-stretching-cropping-at-the-same-time/5013/2 "2020-01-27T21:40:51Z")

</div>

> **[jdotrjs/phaser3-nineslice](https://github.com/jdotrjs/phaser3-nineslice)**
>
> A Nineslice plugin for Phaser 3. Contribute to jdotrjs/phaser3-nineslice development by creating an account on GitHub.