# Cannot center menu text?

**URL:** <https://phaser.discourse.group/t/cannot-center-menu-text/4446>\
**Category:** Phaser 3\
**Created:** [December 2, 2019, 7:23pm UTC](https://phaser.discourse.group/t/cannot-center-menu-text/4446 "2019-12-02T19:23:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thundros](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thundros/32/2057_2.png) [@Thundros](https://phaser.discourse.group/u/Thundros)\
**Post date:** [December 2, 2019, 7:23pm UTC](https://phaser.discourse.group/t/cannot-center-menu-text/4446/1 "2019-12-02T19:23:12Z")

</div>

So I am trying to center my text for my title screen in order to create a clickable menu & be able to control the overall X / Y position of the entire menu yet keeping it centered & adding X / Y offsets to it as well. What am I doing wrong here?

Specifically, line{s} 152 & 153 :

```javascript
class TitleScene extends Phaser.Scene {

	constructor ( ) {
		super ({
			key : 'title', 
		});
	}

	centerX ( ) {

		return ( this.sys.game.config.width / 2 );

	}

	centerY ( ) {

		return ( this.sys.game.config.height / 2 );

	}

	preload ( ) {
		this.hero = this.add.sprite (
			this.centerX ( ), this.centerY ( ), 'hero'
		);
	}

	init ( ) {

	}

	create ( ) {

		this.__textStyle = [];
		this.__MenuItem = [];
		this.__MenuOption = [];

		this.__MenuItemX = [

		];

		this.__MenuItemY = [

		];

		this.__MenuX = [ 

			0, 0, 

		];

		this.__MenuY = [

			10, 10, 

		];

		this.__MenuItemXOffset = [

			0, 0, 

		];

		this.__MenuItemYOffset = [

			10, 100, 

		];

		this.__WINDOW_WIDTH = ( ( window.innerWidth ) );
		this.__WINDOW_HEIGHT = ( ( window.innerHeight ) );

		this.__WINDOW_HALF_WIDTH = ( this.__WINDOW_WIDTH / 2 );
		this.__WINDOW_HALF_HEIGHT = ( this.__WINDOW_HEIGHT / 2 );

		this.__MenuOption [0] = 'Press Start';
		this.__MenuOption [1] = 'Quit Game';

		for ( this. __i = 0; this.__ i <= 1; this.__i++ ) {

			if ( this.__i === 0 ) {

				this.__textStyle [this.__i] = {
					font : "64px Arial Narrow", 
					fill : "#fff", 
					align : "center", 
					backgroundColor : "transparent", 
					wordWrap : {
						width : this.hero.width * 4, 
						useAdvancedWrap : true, 
					}
				};

			}

			if ( this.__i === 1 ) {

				this.__textStyle [this.__i] = {
					font : "64px Arial Narrow", 
					fill : "#fff", 
					align : "center", 
					backgroundColor : "transparent", 
					wordWrap : {
						width : this.hero.width * 4, 
						useAdvancedWrap : true, 
					}
				};

			}

			this.__MenuItem [this.__i] = this.add.text (
				0, 0, this.__MenuOption [this.__i], 
				this.__textStyle [this.__i]
			);

		}

	}

	update ( ) {

		// this.__text.x = Math.floor ( this.hero.x + this.hero.width / 2 );
		// this.__text.y = Math.floor ( this.hero.y + this.hero.height / 2 );

		for ( this. __i = 0; this.__ i <= 1; this.__i++ ) {

			this.__MenuItemX [this.__i] = ( this.__MenuX [this.__i] );
			this.__MenuItemY [this.__i] = ( this.__MenuY [this.__i] );

			// CAN BE :: { 
				// this.__MenuItem [this.__i].width 
					// OR 
				// this.__MenuItem [0].width
			// }

			this.__MENU_ITEM_WIDTH = ( this.__MenuItem [0].width );
			this.__MENU_ITEM_HEIGHT = ( this.__MenuItem [this.__i].height );

			this.__MENU_ITEM_HALF_WIDTH = ( this.__MENU_ITEM_WIDTH / 2 );
			this.__MENU_ITEM_HALF_HEIGHT = ( this.__MENU_ITEM_HEIGHT / 2 );

			this.__TextX1 = ( this.__WINDOW_HALF_WIDTH );
			this.__TextX2 = ( this.__MENU_ITEM_HALF_WIDTH );

			this.__TextY1 = ( this.__WINDOW_HALF_HEIGHT );
			this.__TextY2 = ( this.__MENU_ITEM_HALF_HEIGHT );

			this.__MenuItem [this.__i].x = ( ( this.__MenuItemX [this.__i] ) + ( this. __TextX1 - this.__ TextX2 ) + ( this.__MenuItemXOffset [this.__i] ) );
			this.__MenuItem [this.__i].y = ( ( this.__MenuItemY [this.__i] ) + ( this. __TextY1 - this.__ TextY2 ) + ( this.__MenuItemYOffset [this.__i] ) );

			// ( this.__MenuItemY1Offset [this.__i] ) + 
			// ( this. __TextY1 - this.__ TextY2 ) + 
			// ( this.__MenuItemY2Offset [this.__i] )

			console.log (
				' { ' + this.__i + ' { ' + 
					this.__MenuItem [this.__i].x + ', ' + 
					this.__MenuItem [this.__i].y + ' } ' + 
				' } '
			);

		}

	}

}

```

Any help is greatly appreciated!